Initially, my div was animating perfectly. However, when I inserted a list inside the divs, the animation only became visible once it reached the bottom of the height of the lists.
To trigger the animation, click on the Products option in the top menu.
The jQuery code I'm using is:
$(function() {
$('.productRangeActivator').click(function(){
$('.productRange').animate({'height': '310px'}, 1000);
$('.productRange').css({'overflow': 'visible'}, 1000);
});
});
This is the HTML code:
<div class="productRange">
<div class="hardware">
<span>
<h1>Hardware</h1>
<ul class="productList">
...
</ul>
</span>
</div>
...
</div>
Finally, here is my CSS:
.productRange {
width: 100%;
height: 0;
overflow: hidden;
}
.hardware {
padding: 0 0 0 25px;
height: 250px;
float: left;
overflow: hidden;
}
.stainlessSteel {
padding: 0 0 0 30px;
height: 250px;
float: left;
overflow: hidden;
}
...