Checkbox my accordion
An accordion-like expand/collapse section using the checkbox hack
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.