Checkbox my accordion

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.

  ```html
  <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.

  ```css
  .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.