Browse 25+ Tools

Pure CSS Accordion

Build elegant, accessible collapsible panels. Customize colors, spacing, and icons to generate zero-dependency HTML5 accordions instantly.

Required HTML
CSS Styles 
/* Generated on cssgen.org */

The Evolution of the Accordion

In the past, building an accordion required an excessive amount of code. You either imported a heavy JavaScript library to handle click events and height calculations, or you relied on the complex "Checkbox Hack"—where invisible CSS checkboxes tracked the open/closed state of sibling elements.

Today, semantic HTML gives us the <details> and <summary> tags. The browser natively understands that clicking the summary toggles the visibility of the content inside the details. This approach is superior because it is natively accessible to screen readers and requires zero JavaScript to function. Read the specification on the MDN Web Docs.

✨

Pro Tips for Modern Accordions

  • The Exclusive `name` Attribute: If you select "Only One Open" in our generator, you will notice we add a name="faq-accordion" attribute to the HTML. This is a brilliant, recently implemented HTML standard that forces the browser to automatically close other panels when a new one is clicked—eliminating the need for JS entirely!
  • Removing the Default Marker: Browsers apply a default, ugly black triangle to the summary tag. Our generated CSS removes this using list-style: none; and ::-webkit-details-marker { display: none; } so you can apply your own custom icons via pseudo-elements.
  • Animating Height: Be aware that smoothly animating the height of a <details> tag using pure CSS is still notoriously difficult because CSS cannot transition to height: auto. If your design strictly requires buttery-smooth sliding animations rather than instant toggles, you will still need a minimal JavaScript snippet to calculate the pixel height.
🔗

Support This Free Tool

If this tool helped you modernize your UI and drop a JS dependency today, the best way to say thanks is by linking to us from your dev blog or repository. Just copy the snippet below!

<a href="https://cssgen.org/accordion" target="_blank" rel="noopener noreferrer">Pure CSS HTML5 Accordion Generator</a>

Frequently Asked Questions

How do you make an accordion without JavaScript?

The standard, accessible way to create a zero-JS accordion is by using HTML5 <details> and <summary> elements. The browser inherently understands the relationship between these tags and handles the expand/collapse interaction natively.

How do I make a pure CSS accordion only open one panel at a time?

In all modern browsers, you can group multiple <details> elements into an exclusive accordion by giving them the exact same name attribute (e.g., <details name="my-accordion">). Clicking one panel will automatically close the others.

Why isn't my CSS transition working on the accordion height?

CSS cannot interpolate (transition) between height: 0 and height: auto, which is what the <details> tag does natively. While you can animate the opacity or padding of the content, animating the actual height expansion currently requires JavaScript to calculate the fixed pixel heights, or cutting-edge CSS features like interpolate-size that are not yet universally supported.