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.

Top comments (4)

grahamthedev profile image
GrahamTheDev • Edited on

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 on

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...

🌚 Life is too short to browse without dark mode