Making an expandable box with nothing but html and css you can also have only one div, and just change the height of it.

css-expandbox.html

<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.