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.

Discussion (4)

Collapse
inhuofficial profile image
InHuOfficial • 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 Author • 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 Author

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