JQuery slideUp / slideDown not animating
I am trying to create two divs with a title and a content, and when I click on the title, the content should slide up to hide itself.
You can find my code on the JSFiddle .
My HTML:
<div id="left-content">
<div class="news-block">
<div class="block-head">News membres</div>
<div class="block-content"></div>
</div>
<div class="news-block">
<div class="block-head">News premium & VIP</div>
<div class="block-content"></div>
</div>
</div>
And my JavaScript:
jQuery(document).ready(function($){
$('div.news-block').on('click', '.block-head', function(){
var content = $(this).parent().find('div.block-content');
if (content.is(':visible'))
content.slideUp("slow");
else
content.slideDown("slow");
});
});
I am writing a couple of posts that you cannot use slideUp () on an example tbody or a floating div, but as you can see my "content" div is not floating, and why am I not why it is not working.
Do you have any ideas?
Thank.
+3
source to share
2 answers
#left-content .news-block .block-content {
background: #c3c3c3;
margin-left: 8px;
height: 50px;
}
Use height instead of css min-height property.
For more information :
http://bugs.jquery.com/ticket/6618
Demo:
+9
source to share
Here's another solution without changing the CSS:
$('div.news-block').on('click', '.block-head', function(){
var content = $(this).parent().find('div.block-content');
if (content.is(':visible')){
content.animate({minHeight: '0px'}, 1000, function(){
$(this).css('display','none');
});
}else{
$(content).css('display','block');
content.animate({minHeight: '150px'}, 1000);
}
});
+2
source to share