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.

Comments

[GrahamTheDev]

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!

[Tamer]

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

[Temani Afif]

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

[Tamer]

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