My expanding div functionality is almost perfect, but I've noticed that the transition when opening abruptly on divs with text. However, the closing transition is smooth. Can anyone help me make the opening transition as smooth as the closing one? Below is my code and a link to a jsFiddle demo.
How can I achieve a smoother transition effect when opening?
Demo: http://jsfiddle.net/phamousphil/s34fA/1/
HTML:
<div class="grid_6 containerExpand collapsedExp">
<div class="headerExpand"><a href="http://www.google.com">the google</a><br /></div>
<div class="contentExpand">
<p>google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff!</p><br />
<p>google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff!</p>
</div>
</div>
<div class="grid_6 containerExpand collapsedExp">
<div class="headerExpand"><a href="http://www.yahoo.com">YAHOO</a><br /></div>
<div class="contentExpand">
<p>Yahoo!.</p>
</div>
</div>
CSS:
.containerExpand {
}
.headerExpand {
cursor: pointer;
}
.headerExpand:hover {
background-color: #d3d3d3;
}
.collapsedExp .headerExpand {}
.collapsedExp .headerExpand:hover {
background-color: #d3d3d3;
}
.contentExpand {
height: auto;
min-height: 100px;
overflow: hidden;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
}
.collapsedExp .contentExpand {
min-height: 0px;
height: 0px;
}
JavaScript:
$(function(){
$('.headerExpand').click(function(){
$(this).closest('.containerExpand').toggleClass('collapsedExp');
$(".headerExpand").find("a").click(function(e){e.stopPropagation()});
});
});