A no-javascript toggle content feature

I wanted to post a quick tutorial about a method I use to create quick toggle links to areas of content without using javascript. It's pretty neat, what we do is, we use a 'checkbox' form element, its label, and a piece of content, and we stack them all on top of each other.

Your html will look like this

<input type="checkbox" value="selected" id="toggle-input" class="toggle-input">
<label for="toggle-input">toggle</label>

<div class="toggle-content">
  the content you want to show / hide
</div>

Once you have this structure, you'll be able to use this CSS to create the toggle effect.

.toggle-input {
  display: none;
}
.toggle-content {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease max-height;
}
.toggle-input:checked ~ .toggle-content {
  max-height: 1000px; // this number needs to be bigger than its content
}

What this CSS does is hide the actual checkbox element, leaving just the label. Clicking the label checks the box, and our sibling selector of '~' tells our .toggle-content div that when the input is checked, expand it's max height.

note -- the max height css is a trick. You can't animate the 'height' attribute from 0 to auto, so to get around this, we set the max-height to 0, and the overflow to hidden. Then, we can animate the max-height attribute, giving us the desired 'slide' effect.

You can also style the label specifically if the input is checked like so:

.toggle-input:checked + label {
  // checked label styles
}

I still need to do some cross browser testing, but sibling CSS selectors work in IE8 and above. I created an object from this solution and use it quite often as I develop user interfaces. You can see a working example from my codepen below.

See the Pen No Javascript Toggle by Drew Bolles (@bollskis) on CodePen