Show/reveal with max-height

by Matthew Day

HTML

<div class="container">
  <div class="clickme">Click Me</div>
  <ul class="hide">
    <li>Cities</li>
    <li>Houston</li>
    <li>kansas City</li>
    <li>Chicago</li>
    <li>Los Angeles</li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
  color: #444;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: 14px 0 0 14px;
}

.clickme {
  cursor: pointer;
}

.hide {
  list-style: none;
  margin-top: 12px;
  max-height: 0;
  overflow: hidden;
  transition: all 600ms ease-in-out;
}

li {
  padding-left: 12px;
}

li:first-of-type {
  padding-left: 0;
  text-transform: uppercase;
}

.show  {
  max-height: 100px;
}

JavaScript

$('.clickme').click(function() {
	$('.hide').toggleClass('show');
});

/*

To animate the hide/reveal of an element, we do the following:
  1) Set max-height on the class that hides to 0 with overflow: hidden.
  2) Set max-height on the class that reveals to something that is more than you need. There is no need to add overflow: visible to this class because max-height takes care of reveal. Just a side note but we cannot animate overflow (just as we cannot animate display- we can only animage values that have a number).
  
SOURCE
http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css (answer by jake)

*/