DEV Community

Cover image for Pure CSS Accrodion
Tamer
Tamer

Posted on

Pure CSS Accrodion

Here is another component, usually made with JS, developed in pure CSS.
Also on this occasion I exploited the potential of the input, which guarantee a homogeneous robustness in every browser and operating system.

In this case the checkbox allows you to have more tabs open in an accordion , unlike the radio.

Top comments (4)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Why make things complicated?

Works with keyboard, is accessible, is easier to style and is semantically correct, use the <details> and <summary> elements to save yourself a load of headaches!

Collapse
 
aka_tamer profile image
Tamer • Edited

MY COMPLIMENTS, thank u for this trick!
small note - this is not supported by explorer developer.mozilla.org/en-US/docs/W...

Collapse
 
afif profile image
Temani Afif

You have to use + instead of ~ because clicking on the first will open both the first and the second

Collapse
 
aka_tamer profile image
Tamer

yes, you right. It is my distraction error...