2.2Advanced widgets: tabs, accordion, carousel
The essentials in 30 seconds
- Tabs and accordion organize a lot of content in little space (click to reveal).
- Carousel/slideshow scrolls images or testimonials — to use sparingly.
- Golden rule: these widgets hide content → never put the essentials in them (visitors don't always click).
Through-line — Nadia tidies the FAQ
The joiner's "projects" page overflows with text. Nadia tidies the frequent questions into an accordion (collapsed by default) and presents the furniture types in tabs. But she keeps the key message — "free quote within 48 h" — visible, outside the accordion: a visitor in a hurry won't necessarily click.
Continues 2.1 — organizing rich content without burying it.
1. Tabs, accordion, carousel
Tabs organize content into clickable sections (you switch between them). The Accordion/Toggle offers collapsible sections (clicking a title unfolds the answer) — perfect for a FAQ. The Carousel/Slideshow scrolls items (images, testimonials, cards).
Icon boxes and testimonials round out the toolkit for presenting services and social proof readably.
2. Used wisely
Crucial point: tabs, accordions and carousels hide content (invisible until you click/scroll). So: never bury the essentials — a key message, a price, an action button must stay visible. A carousel that scrolls on its own can also make an item get missed.
Also think accessibility: keyboard navigation, readable content. Nadia keeps the flagship offer in plain sight and reserves tabs/accordion for secondary content.
🔎 Concrete example — Organizing without burying (Nadia's case)
Visible (outside widget): "Free quote within 48 h" + button.
Accordion: FAQ (collapsed by default).
Tabs: furniture types (kitchen / wardrobe / staircase).
Carousel: client reviews (sparingly, no aggressive auto-scroll).
→ The essentials jump out, the rest is tidied away.Result: a clear, uncluttered page.
Lesson: hide the secondary, never the essentials.
Section vocabulary
- Tabs
- Organize content into clickable tabs (switch from one to another).
Simple example: tabs "Kitchen / Wardrobe / Staircase".
What it is not: putting the quote button in them (it must stay visible).
Reflex: tabs = parallel secondary content.
- Accordion / Toggle
- Collapsible sections: clicking a title unfolds the answer (ideal FAQ).
Simple example: the joiner's FAQ as a collapsed accordion.
What it is not: hiding crucial info behind a collapsed title.
Reflex: accordion = FAQ and details, not the essentials.
- Carousel / Slideshow
- Scroll items (images, testimonials, cards).
Simple example: a carousel of client reviews.
What it is not: an auto carousel that makes the key item get missed.
Reflex: carousel sparingly, controlled scrolling.
- Used wisely
- Don't hide the essentials: offer, price, action stay visible.
Simple example: "quote within 48 h" outside the accordion, always visible.
What it is not: burying the flagship offer in a tab.
Reflex: what's important is seen without a click.
- Widget accessibility
- Keyboard navigation and content accessible to all.
Simple example: accordion usable with the keyboard.
What it is not: an interactive widget unusable without a mouse.
Reflex: check that everything also opens with the keyboard.
In practice — Organizing rich content
- Identify the essentials (offer, action) and keep them visible, outside any widget.
- Tidy a FAQ into an accordion (collapsed by default).
- Present categories in tabs.
- Add a reviews carousel, with no aggressive auto-scroll, and test with the keyboard.
Ready-to-say script — explaining the tidying to the client (20 s)
"To let the page breathe, I tidied the frequent questions into an accordion and the furniture types into tabs. But your key message — free quote within 48 h — stays visible at all times, because a visitor in a hurry won't necessarily click everywhere."
Reassure: organizing doesn't mean hiding what's important.
Copy-paste template — where to tidy what
ESSENTIALS (always visible): _______________
FAQ / DETAILS → ACCORDION (collapsed): _______________
PARALLEL CONTENT → TABS: _______________
GALLERY / REVIEWS → CAROUSEL (sparingly): _______________
CAROUSEL AUTO-SCROLL: disabled / slow
KEYBOARD TEST (accessibility): done / to doFAQ
Collapsed accordion: each question unfolds on demand.
Varied services
Tabs to compare offers without lengthening the page.
Social proof
Reviews carousel, but keep 1-2 strong reviews visible too.
Mobile
Accordion very handy on mobile (saves height), to test with a finger.
✓ Best practices
- Keep the essentials visible, outside any widget.
- Reserve tabs/accordion for the secondary.
- Test accessibility (keyboard).
✗ Common pitfalls
- Burying the offer/action in a tab or accordion.
- Auto-scrolling carousel that makes info get missed.
- Forgetting keyboard navigation.
Key takeaways
- Tabs/accordion: store a lot in little space.
- Carousel: scrolling, sparingly.
- These widgets hide content.
- The essentials stay visible without a click.
48h challenge — apply tomorrow
Turn a FAQ into a (collapsed) accordion and categories into tabs, while keeping a key message visible outside any widget. Check that the accordion opens with the keyboard. 20 minutes.
- I tidy the secondary into tabs/accordion.
- I keep the essentials visible without a click.
- I check keyboard accessibility.
Frequently asked questions
Can I put my main offer in an accordion?
No: accordions hide the content until you click. The offer, price and action button must stay visible. Reserve the accordion for FAQs and details.
Are carousels discouraged?
Not forbidden, but to use with measure: an auto-scrolling carousel can make information get missed and hurt accessibility. Also keep 1-2 strong items visible outside it.
Are these widgets accessible?
They can be if they stay keyboard-navigable and readable. Test opening/closing without a mouse, especially for an important FAQ.
Nadia wants to tidy a lot of content, but her "quote within 48 h" offer must stay seen. Which approach?