Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Making an expandable box with nothing but html and css you can also have only one div, and just change the height of it.
input[type="checkbox"].expand-content{ display:none; }
input[type="checkbox"].expand-content ~ .collapsed { display:block; }
input[type="checkbox"].expand-content ~ .expanded { display:none; }
input[type="checkbox"].expand-content:checked ~ .collapsed { display:none; }
input[type="checkbox"].expand-content:checked ~ .expanded { display:block; }
<input type="checkbox" class="expand-content" />
<div class="collapsed">this is the small content</div>
<div class="expanded">this is the big content</div>
Copy link

Michael-E-Rose commented Jan 11, 2016

This is very good, I'll embed it in my website. There is however one problem: The first box is always starts expanded while the following start collapsed. Why's that?

Copy link

Michael-E-Rose commented Jan 11, 2016

Nevermind, it works again. I just changed display:block; to display:none; several times.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment