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

Collapse
 
aka_tamer profile image
Tamer Author • Edited on

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

🌚 Life is too short to browse without dark mode