Home CSS Accordion with CSS3

Accordion with CSS3


Hi All, today I am going to share with you some experiment with adjacent and sibling combinatory and :checked pseudo-class. Using hidden input and labels we will create an accordion that will Animate the area of content by opening and closing them.

Many Variations of css-only accordion. And most of them are implemented using :target pseudo-class.  The problem behind :target is we can not close the content areas again or we can perform it mupltipel. But by using hidden checkboxes, we can control the opening and closing. And by using radio button you can open only one content area on click.

So, let start!

Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use. 

For More Details please check it with code

Accordion Html struture : 

Css Code for Accordion styling:

Another css code for accordion parent structure:


  1. It’s laborious to seek out knowledgeable folks on this matter, however you sound like you already know what you’re talking about! Thanks


Please enter your comment!
Please enter your name here