OneTaskBy Tim King · Updated
Accordion Builder
Smooth Animated Accordion in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Accordion Builder works
An accordion builder makes the stacked, click-to-open panels used for FAQs, settings and long pages. Type your titles and content, pick an icon and speed, and copy HTML, CSS and a few lines of JavaScript that animate the native details element smoothly.
Each panel is a <details> element with a <summary> heading. Browsers already make these
focusable, open them with Enter or Space, and announce them to screen readers as expandable, so the
accordion needs no ARIA attributes or custom key handling.
How the accordion builder animates the panels
Native details elements snap open. The script catches the click on the summary, sets the panel
open, and uses the Web Animations API to grow the content from zero to its measured height. When
closing it shrinks the height first and only then removes the open attribute. Visitors who ask
for reduced motion in their system settings get the instant native behaviour, and if the script
fails to load the panels still work.
One panel at a time
Giving every details element the same name attribute turns the group into an exclusive
accordion: opening one closes the others. This is built into Chrome, Edge, Safari and Firefox, so
no script is needed for it. Older browsers ignore the attribute and let several panels stay open.
FAQ
Is a details element accordion accessible?
Yes. The summary is exposed as a button with an expanded or collapsed state, and it works with the keyboard out of the box. Keep the summary text short and descriptive, because screen readers read it every time the visitor moves through the list.
Will search engines index the hidden content?
Google indexes text inside closed details elements and can show it in results. Browsers also open a closed panel automatically when the visitor uses find in page and the match is inside it, which hidden divs cannot do.
Can I put links, images or lists inside a panel?
Yes. The content area is a normal div, so replace the paragraph with any HTML. The animation measures the real height when the panel opens, so tall content and images work, as long as images have width and height set so the height is known.
Why does the panel snap shut in some browsers?
The animation needs the Web Animations API, which every current browser supports. If the visitor has turned on reduced motion, the script deliberately skips the animation and lets the panel open and close instantly.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Read More Builder
Build an accessible Read more toggle that expands clipped text.
Expandable Card
Collapsible card built on details/summary, no JavaScript.
FAQ Schema Generator
Turn a list of questions and answers into FAQPage JSON-LD structured data.
CSS Tooltip Generator
Pure CSS tooltips from a data attribute, with an arrow.
Card Builder
Design a card component and copy its HTML and CSS.