HTML
<div class="accordion">
<a href="#" class="accordion-toggle">Hover for height animate</a>
<div class="accordion-content">
<div class="accordion-inner">
<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>
</div>
</div>
LESS
body{
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion{
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
&:hover{
// max-height technique
.accordion-content{
// If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
max-height: 300px;
}
}
}
.accordion-content{
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
// "height: 0" not work with css transitions
max-height: 0;
}
.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;
&:hover{
background: darken(#00b8c9, 15%);
}
}
