frosty frosty - 9 months ago 30
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');



Try using slideToggle() like this: