Building Block

Accordions & Tabs

Animated FAQ accordions, accessible tab panels, and nested content toggles — vanilla HTML/CSS/JS patterns that Claude deploys in a single conversation. No frameworks, no dependencies.

Get started — from £6.99/month All building blocks

Code Patterns

Accordion & tab patterns

Three proven patterns covering FAQ sections, tabbed content areas, and nested expandable menus. Claude generates the full markup, CSS, and vanilla JS — matched to your theme and deployed live on your server.

Pattern 1 — Animated FAQ Accordion

A smooth-animating accordion using the native <details>/<summary> element — zero JavaScript for the expand/collapse, with an optional JS layer for smooth height animation and “one open at a time” grouping. Ideal for FAQ sections, help content, and filter panels.

HTML CSS Optional JS Accessible ARIA
  • Native <details> / <summary> elements — fully functional without JavaScript, crawlable by Google
  • CSS max-height transition for smooth open/close animation; prefers-reduced-motion disables it automatically
  • Chevron icon rotates 180° on open via details[open] .chevron { transform: rotate(180deg); }
  • Optional JS: closes sibling items when a new one opens (only-one-open behaviour)
  • Brand-colour left border accent and hover background shift on each item
  • FAQPage JSON-LD structured data block included — eligible for Google rich result snippets
Prompt to use with Claude

Add an animated FAQ accordion to my site. Use native <details>/<summary> with a CSS max-height transition and chevron rotation. Close siblings when a new item opens. Include these Q&As: [Question 1 / Answer 1], [Question 2 / Answer 2], [Question 3 / Answer 3]. Brand colour: [your hex]. Add FAQPage JSON-LD. CSS in theme.css, optional JS in main.js.

Pattern 2 — Tab Panel Navigation

A horizontal tab bar that switches between content panels using vanilla JS. Each tab has an active state, the content area swaps without a page reload, and correct ARIA roles make it fully accessible to screen readers and keyboard users.

Vanilla JS CSS ARIA Roles No Reload Keyboard Nav
  • Tab list uses role="tablist"; each tab uses role="tab" + aria-selected
  • Each panel uses role="tabpanel" + aria-labelledby wired to its triggering tab
  • Active tab: brand-colour bottom border 2px + bold label; inactive tabs: muted text with hover colour shift
  • Content panels hidden via display: none; active panel fades in with opacity 0→1 150ms transition
  • Keyboard: left/right arrow keys cycle between tabs; Home/End jump to first/last tab
  • Optional URL hash update on tab change for bookmarkable deep links
  • Mobile: tab list wraps to 2 columns below 480px with full touch targets
Prompt to use with Claude

Add a tab panel section to my page. Tabs: [Tab 1 label, Tab 2 label, Tab 3 label]. Each panel contains: [Panel 1 content], [Panel 2 content], [Panel 3 content]. Active tab: brand-colour bottom border. Content fades in on switch. Add ARIA roles (tablist, tab, tabpanel) and left/right arrow key navigation. Mobile: tabs wrap to 2 columns below 480px. CSS in theme.css, JS in main.js.

Pattern 3 — Nested Accordion / Tree Menu

A multi-level expandable tree for documentation sidebars, category menus, and complex help content. Parent items expand to reveal child items, which can themselves expand further. Includes active path highlighting and optional localStorage persistence.

Vanilla JS CSS Multi-level Sidebar Nav LocalStorage
  • Nested <ul> structure — each parent <li> has a toggle button and a collapsible child <ul>
  • CSS max-height animation per level independently; no global reflow on expand
  • Active path highlighting: current page item and all its parent items receive branded accent colour
  • Expand/collapse state persisted in localStorage — tree remembers position on page reload
  • Optional search/filter input: hides non-matching items and auto-expands matching branches
  • Suitable as a fixed documentation sidebar, scrollable independently of main content
Prompt to use with Claude

Add a nested accordion tree menu to my page. Top-level items: [Category A, Category B, Category C]. Category A children: [Page 1 /page-1, Page 2 /page-2]. Category B children: [Page 3 /page-3, Page 4 /page-4]. Highlight the active page item and its parent. Persist expand/collapse state in localStorage. CSS in theme.css, JS in main.js.

What you get

Every accordion & tab pattern includes

Keyboard accessible

All patterns follow WCAG 2.1. Accordion items toggle on Enter/Space, tab panels cycle on arrow keys, and focus never gets lost behind closed panels.

Matched to your theme

Claude reads your existing theme.css and writes accordion and tab styles that inherit your colour variables, border radius, and spacing — consistent with every other component.

SEO-friendly structure

FAQ accordions include FAQPage JSON-LD — eligible for Google rich result snippets. Native <details> elements are crawlable without JavaScript.

Iterable in seconds

Add a question, change tab labels, adjust animation speed. Describe the change to Claude and it’s updated on your live site within seconds.

More building blocks

Pair with

Combine accordions and tabs with these building blocks for complete page layouts.

Modals & Overlays

Accessible modal dialogs, GDPR cookie banners, and exit-intent popups for additional interactive content patterns.

View patterns →

Navigation & Menus

Sticky navbars, hamburger drawers, and dropdown mega menus that pair naturally with nested accordion sidebars.

View patterns →

SEO & Structured Data

FAQ accordions link to FAQPage JSON-LD — add schema markup to boost rich result eligibility.

View patterns →

Deploy your accordion or tabs today

From £6.99/month. First month free — no credit card required.

View pricing All building blocks