Skip to content

Accordions for React and Tailwind

An accordion lets people choose what to read instead of scrolling past it. Good ones animate height smoothly, show their state clearly and work with the arrow keys. Long content is the honest test, so try more text than you plan to use. Install one with a single command, then use it for answers, details and settings. Let the first item start open when it matters.

About accordions

Accordions stack sections whose bodies open and close under their headings. They hold FAQs, settings groups, filters, long specifications and navigation, either letting several sections open at once or closing one as another opens, and the best ones animate height smoothly instead of snapping.

Use a button for each heading so it works from the keyboard and tells screen readers whether it is expanded. Don't hide what most people need behind a click, keep headings short enough to scan, and make sure in page search can still find text inside closed sections.

Frequently asked questions

Make each heading a button with aria-expanded and aria-controls pointing at its panel, or use the native details and summary elements. Radix and Base UI primitives handle these attributes for you.

Animate to the panel's measured height, or use CSS interpolate-size with height auto where supported. Grid rows animating from 0fr to 1fr is another reliable trick.

Only when sections are alternatives and people compare them one by one. For FAQs and settings, let several stay open so nobody loses what they were reading.

Yes, they work without JavaScript, are searchable with find in page and are accessible by default. Styling the marker and animating them takes a little extra CSS.

Text inside closed sections is still in the HTML and gets indexed. Keep it rendered on the server rather than loaded on open, and put the most important content outside them.

A chevron that rotates when the section opens is the clearest. Place it consistently at the end of each heading, and make the whole heading clickable, not just the icon.

Tabs suit a few sections of similar length viewed one at a time on wide screens. Accordions suit many sections, long labels and narrow screens.

Explore more