.accordion{ 

  display: inline-block;

  text-align: left;

  margin: 1%;

  width: 70%; 

  &:hover{

    .accordion-content{

      max-height: 300px;

    }

}

.accordion-content{

  -webkit-transition: max-height .5s; 

  -moz-transition: max-height .5s; 

  -ms-transition: max-height .5s; 

  -o-transition: max-height .5s; 

  transition: max-height .5s;  

  background: #e5feff;

  overflow: hidden;

  max-height: 0;

  text-align:left;

}

.accordion-inner{

  padding: 0 15px;

}

.accordion-toggle{

  -webkit-transition: background .1s linear;   

  -moz-transition: background .1s linear;   

  -ms-transition: background .1s linear;   

  -o-transition: background .1s linear;   

  transition: background .1s linear;   

  background: #00b8c9;

  border-radius: 3px;

  color: #fff;

  display: block;

  font-size: 30px;

  margin: 0 0 10px;

  padding: 10px;

  text-align: center;

  text-decoration: none;

}

============

<div class="accordion"> 

<div class="accordion-toggle">Hover for height animate</div>

<div class="accordion-content">

      <p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>

      <p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS         animate, and you can use "max-height" with a great value for emulate this effect.</p> 

</div>