In the pursuit of web performance, we are all looking to come up with clever solutions to make our websites load faster. One way many of us do this is coming up with and stealing (which in this case, the latter is more appropriate) ways of writing less JavaScript.

Many websites I work on include an FAQ section, and nine times out of ten I end up building some form of accordion. But recently I saw a method of building a mobile menu without the use of JavaScript, and I wondered if I could use the same method to build an accordion.

See the Pen Building an Accordion without JavaScript – Part I by Michael (@mjtweaver) on CodePen.

The above pen really simply demonstrates how we can achieve this. We use the label to use as the question, and we also include a checkbox. The checkbox is hidden from view. When we click on the label, it checks the input and then we can use this to display the answer. You’ll notice here we use the general sibling combinator or ~. I wrote some more information on this here. The above example was very simple, how about a styled up version?

After searching on Google, I know others have also used this solution in the past, so it may not be new to you, but it would interesting to get your thoughts.

As a note on browser compatibility, the only thing you have to really consider is the general sibling selector, information can be found here.