DEV Community

Cover image for Pure CSS Accrodion

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)

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!

aka_tamer profile image
Tamer Author • Edited

MY COMPLIMENTS, thank u for this trick!
small note - this is not supported by explorer

afif profile image
Temani Afif

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

aka_tamer profile image
Tamer Author

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