Pure CSS Accordions
CSS accordions expand and collapse sections of content using the details element, radio inputs or :target, so they stay accessible and script-free.
6 free examples, most liked first. Click one to preview it and copy the code.
Nested Details Accordion
by @admin · Accordion
Expanding Card With Grid Rows
by @admin · Accordion
Exclusive Accordion With name Attribute
by @admin · Accordion
Expanding Flex Gallery
by @admin · Accordion
Details & Summary FAQ Accordion
by @admin · Accordion
Plus Minus FAQ Accordion
by @admin · Accordion
Learn how it works
Read the step-by-step guide: CSS Accordion Without JavaScript: Using details and summary
Accordions FAQ
How do I make an accordion with CSS only?
Use the HTML details and summary elements, or radio inputs with sibling selectors, then style the open state. The examples here include both approaches.
How do I use these pure CSS accordions?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.