user profile image

This is an iteration from my previous accordion that used Javascript to toggle a class. This iteration uses :checked pseudo class, visually hiding the input itself, and styling the label. It triggers the animation via general sibling selector. It should be noted that the way my markup is structured, the adjacent sibling selector (+) would also work in this example. The general sibling selector allows for some degree of variation, though, being able to select immediately adjacent siblings or siblings further down in the document.

I'm currently uncertain as to the semantic usage of inputs without the form tag or if this is entirely OK, but it's an experiment.


  1. Really really nice work here. Love it.

  2. Nice, but you can also use the <details> and <summary> tags. 😊

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.