About this block
A row of tabs with one content panel underneath. Clicking a tab swaps the panel and moves the underline to that tab, so you can fit three sections of content into the space of one. Visitors pick what they want to read instead of scrolling past the rest.
When to use it
- You have parallel content people choose between: plans, product versions, locations or audiences.
- A product page needs overview, specs and shipping details without making the page very long.
- You want to show the same kind of information for different groups, like "For homeowners" and "For businesses".
- Space is tight and every panel is short enough to read in one go.
What's inside
- A tab bar with 3 tabs, Overview, Features and Pricing, over a thin full-width line.
- The active tab is underlined and shown in your primary colour. The others sit in softer text.
- Each panel holds an h3 heading and a paragraph, kept to a readable line length on wide screens.
- The first tab is open when the page loads, and only one panel shows at a time.
- On phones the tabs stay on one line and the bar scrolls sideways if you add more tabs than fit.
How to customize it
- Rename the tabs with short labels of one or two words, so they fit on a phone screen.
- Add images, lists or a Button inside any panel. Each panel is a normal container you can drop content into.
- To add a tab, duplicate a tab button and a panel, give the new panel its own ID, and point the new button's click action at that ID.
- Put the most important content in the first tab. Many visitors never click the others.
Questions
- Can Google read the content in the hidden tabs?
- Yes. All panels are in the page's HTML from the start, and only their visibility changes. Search engines read and index content inside tabs.
- Should I use tabs or an accordion?
- Use tabs for 2 to 5 parallel options people compare side by side. Use an accordion for a longer list of separate questions, especially on phones.
- Can a link open a specific tab?
- Not on its own. A visitor arriving on the page sees the first tab. Put the content people link to most in the first panel.