Create a gist now

Instantly share code, notes, and snippets.

Embed
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>
@Michael-E-Rose

This comment has been minimized.

Show comment
Hide comment
@Michael-E-Rose

Michael-E-Rose 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?

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?

@Michael-E-Rose

This comment has been minimized.

Show comment
Hide comment
@Michael-E-Rose

Michael-E-Rose Jan 11, 2016

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

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