Accordions

What is an accordion?

An accordion is a vertically stacked list of headers that expand and collapse to reveal related content panels. Only the header is visible until the user opens it, which keeps long pages compact. Accordions are widely used for FAQ sections, product specifications, filter groups in shops, settings panels, documentation and mobile navigation.

When to use an accordion

Use one when content can be split into clearly labelled sections and users usually need only some of them. Avoid accordions for content everyone must read, and for very short content where collapsing adds clicks without saving space.

Best practices

• The simplest accessible solution is the native <details> and <summary> pair, which provides keyboard support and state without JavaScript.
• For a custom accordion, each header should be a <button> inside a heading element, with aria-expanded and aria-controls linking it to its panel.
• Show a clear indicator, such as a chevron that rotates, and keep the focus outline visible.
• Decide whether multiple panels may be open at once; allowing it is often friendlier.
• Do not hide content needed for search or comparison only inside collapsed panels if users need to see it together.
• Animate height changes gently and disable animation under prefers-reduced-motion.
• Make header rows large enough to tap comfortably on mobile.

Bootstrap, Tailwind CSS and pure CSS versions

The accordion examples are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap 5 versions use the accordion and collapse components with the bundled JavaScript; Bootstrap 6 versions load the JavaScript as an ES module and use the theme-* colour roles. Tailwind CSS versions combine utilities with a small script or <details>, and the pure CSS versions are usually based on <details> and <summary>. Use the framework filter to find bootstrap accordion examples or CSS-only variants, open and close the panels in the live preview, then copy or download the code.