frosty frosty - 1 year ago 71
jQuery Question

Animate div from height: 0px to auto failing on first click

I'm trying to animate a block element from 0px to auto. However, on first click it just instantly shows at its auto height. After the first click, it animates to visible and invisible smoothly just fine.


.item .comments {
display: none;
overflow: hidden;
background: #f7f8fb;
padding: 0 10px;
margin: 0;


$(document).on('click', '.btn-comment', function(){

var comments = $(this).closest('.item').find('.comments');

if (!':visible')) {{
height: comments.get(0).scrollHeight
}, 250, function(){
}, 'ease');
} else {
height: 0
}, 250, function(){
}, 'ease');


Answer Source

Try using slideToggle() like this:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download