Wir verwenden Cookies zur Verbesserung der Benutzerfreundlichkeit und zum Verfolgen der Besucherströme mit Matomo (Piwik).
Mehr Infos auf der Datenschutzseite. Du kannst die Cookie-Erlaubnis jederzeit am Ende der Seite widerrufen.

Accordions in pur CSS

No javascript in use


CSS + HTML only Accordion Element

  • Languages Used

    This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.

  • How it Works

    Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.

  • Points of Interest

    By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.


Swanky little accordian list

Made in pure CSS, click on the items to see it in action!


Pure CSS Accordion 2.0

Open multiple

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!

Open one

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, aut.