Website elementsNavigation & layout
Tabs
A HTML tabs, built into your site with no plugin and no library. The WAI-ARIA tabs pattern, horizontal or vertical with icons, automatic or manual activation, with a shareable #hash per tab. Below collapseBelow the same panels render as an accordion; without JavaScript every panel shows under its heading.
About the studio
Overview
We design and build small websites for local businesses: a clear home page, the pages people actually look for, and a contact form that reaches you.
Process
One call to understand the business, a written plan within a week, a first draft two weeks later, and changes until you are happy with it.
Pricing
A fixed price agreed before we start, paid in two halves: one at the plan, one at launch. Hosting and small changes are a flat monthly fee.
Contact
Tell us about the business and what the site needs to do. Send us a message and we reply within one working day.
A link can pick a tab: see pricing.
Why people choose us
A small team
The people you meet on the first call are the people who build the site. Nothing is handed to a subcontractor.
Plain tools
Fast static pages with no plugin to update, so the site does not break on its own and loads quickly on a phone.
Real support
Email or call and a person answers. Most small changes are made the same day.
You'll need to give us
- The name of each tab and what goes in itNeeded to start
Send these with your request and we can start straight away. Everything else is ours to do.
Put several related answers in one place, a tab each, that folds into a simple list on a phone.
Also called
PowerPack Advanced TabsUABB Advanced TabsElementor Tabstabbed contentvertical tabs
What it replaces
- PowerPack “Advanced Tabs” (Beaver Builder)
- UABB “Advanced Tabs”
- Elementor Tabs widget
Good for
Alternatives a visitor picks one of: plans, service areas, a product’s description, specifications and delivery, an about page’s team, history and values.
Not for
Content people must compare side by side (use a table or columns), or more than about six tabs: past that the strip scrolls and some tabs are out of sight.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- The WAI-ARIA Authoring Practices tabs pattern: tablist, tab and tabpanel, with aria-selected, aria-controls, aria-labelledby and aria-orientation, and a roving tabindex so the strip is one Tab stop.
- ← → (↑ ↓ when vertical) move between tabs and wrap; Home and End jump to the ends. Automatic activation selects on focus; manual waits for Enter or Space. Tab then moves into the panel, which is itself focusable only when it has nothing focusable inside.
- Below `collapseBelow` the tab strip is removed and each panel’s heading holds a disclosure button (aria-expanded, aria-controls). The panels are the same elements, rendered once; the label appears as the tab and as the heading, and only one of the two is ever displayed.
- Without JavaScript there is no tab strip: every panel shows under its label as a heading, and #id links jump to the panel.
- The newly shown panel fades in over 150 ms; under prefers-reduced-motion it does not.
Where it's live
- superherotech.ai: /elements/tabs/ (demo)
How to ask for it
“The tabs on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Navigation & layout
See them all working- Off-canvas panel
Keep the cart, the filters or the account menu one tap away, sliding in from the edge instead of crowding the page.
- Tabcordion
The same details as tabs where there is room and as an accordion where there is not, even in a sidebar, and the section someone was reading stays open when it changes.
- Scrollbox
Fit a long row of projects, products or categories into one line, and let the edges show there is more to scroll.
- Mega menu
Put every page a visitor might want one click from the header, grouped the way your customers think about them.
Want the tabs on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.