Create a gist now

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.
<style>
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; }
</style>
<label>
<input type="checkbox" class="expand-content" />
<div class="collapsed">this is the small content</div>
<div class="expanded">this is the big content</div>
</label>

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?

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