Two variants for expandable content in pure CSS

expandable-1.html

<!-- https://jsfiddle.net/8cugv62p/ -->
<!-- only on click -->
<style lang="css">
body {
  padding: 20px;
}

#toggled {
  margin-top: 20px;
  width: 300px;
  background-color: #eee;
  overflow: hidden;
  max-height: 0px;
  transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}


#toggler:checked~#toggled {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}

#toggler {
  display: none;
}
</style>

<input type="checkbox" id="toggler">
<button><label for="toggler">Click me to expand!</label></button>
<div id="toggled">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

expandable-2.html

<!-- https://jsfiddle.net/gxq92edv/ -->
<!-- separate buttons and hover -->
<style lang="css">
body {
  padding: 20px;
}

#toggled {
  margin-top: 20px;
  width: 300px;
  background-color: #eee;
  overflow: hidden;
  max-height: 0px;
  transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

a[href='#hover-toggle']:hover+#toggled,
#toggled:target {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>

<a href="#toggled">Slide down</a> | <a href="#">Slide up</a> <br />
<a href="#hover-toggle">Hover to toggle</a>

<div id="toggled">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>