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.
15 free examples, most liked first. Click one to preview it and copy the code.
Image accordion slider (pure CSS)
by @admin · Accordion
Pure CSS Horizontal Accordion
by @admin · Accordion
Flexbox Based Vertical Accordion With Pure CSS
by @admin · Accordion
Pure CSS Horizontal Responsive Image Accordion Slider
by @admin · Accordion
Pure CSS Accordion hover
by @admin · Accordion
Pure css accordion with bounce effect
by @admin · Accordion
Pure CSS Animated Accordion
by @admin · Accordion
Collapsing Accordion Pure CSS
by @admin · Accordion
Animated accordion – pure html css
by @admin · Accordion
Awesome accordion menu using only HTML & CSS
by @admin · Accordion
Pure CSS Accordion with Animation
by @admin · Accordion
Pure CSS Accordion with Images
by @admin · Accordion
Pure CSS Accordion
by @admin · Accordion
Animated Pure CSS accordion
by @admin · Accordion
Image accordion slider (pure CSS) 2
by @admin · Accordion
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.