What is this thing?

An HTML and CSS approach to collapsible content. Which is a pretty cool use of the checkbox hack in my humble opinion.

What isn't this thing?

  • It isn't fully accessible without some JavaScript.
  • It isn't something you can throw on a page and expect to work without writing (or stealing) some CSS.
  • It isn't something that I invented, it's been around for years.

How does it work?

The HTML: Just like most checkbox hack's we're throwing an invisible checkbox on the screen, with a sibling <label> and some other type of content that we want to manipulate or in this case, make visible when the checkbox is checked.

<input class="collapse-check" id="panel01-toggle" type="checkbox"/>
<label class="collapse-toggle" for="panel01-toggle">Panel heading</label>
<div class="collapse-content">
Panel content
</div>

The CSS: We're forcing the collapsible content to be 0px tall, with the overflowing contents hidden by default. When the checkbox is checked we're using the sibling combinator (~) to select and change the height and overflow properties for the collapsed content.

.collapse-content {
max-height: 0;
overflow: hidden;
}
[type="checkbox"]:checked ~ .collapse-content {
max-height: none;
overflow: visible;
}

How do I make it pretty?

Well, that's totally up to you but here is an example that I made that you're more than welcome to borrow or steal from.

See the Pen Checkbox my accordion by Tony Montemorano (@ allusis) on CodePen.