A no-javascript toggle content feature

Dec 28, 2013
Share Article

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

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

If you liked this article please share with others!