<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <script data-require="angular-animate@1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-init="visible = false">
    <h1>Slide toggle CSS animation with AngularJS</h1>
    
    <button ng-click="visible = !visible">Click to toggle content</button>
    
    <div class="animate-show" ng-show="visible">
      <p>This text with the list should be shown</p>
      <ul>
        <li>Hooray!</li>
      </ul>
    </div>
  </body>

</html>
// Code goes here

angular.module('app', ['ngAnimate']);
/* Styles go here */

.animate-show {
  -webkit-transition:max-height ease-out 1s;
  transition:max-height ease-out 1s;
  
  border:1px solid black;
  background:white;
  
  
  
  /* This is a wild guess of the height of the element
     Needs to be in the ballpark of the actual content height,
     but slightly larger.
     Change to, e.g., 30px and 300px to see what happens */
  max-height: 150px;
}

.animate-show.ng-hide {
  /* Animate max height*/
  max-height: 0;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove{
  /* Needed to override display:none which cannot be animated */
  display:block!important;
  overflow-y: hidden;
}

/**
 * To demonstrate which classes are added and when
 */