I'm trying to create two div's with a header and a content, and when I click the header, the content is supposed to slide up to hide itself.
You can find my code on 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 red some posts saying that you can't use slideUp() on tbody for exemple, or on a floating div, but as you can see, my "content" div is not floating, and that's why I don't get why it's not working.
Do you have any idea ?
Thanks.
#left-content .news-block .block-content {
background: #c3c3c3;
margin-left: 8px;
height: 50px;
}
Use height instead of min-height css property.
For more info:
http://bugs.jquery.com/ticket/6618
Demo: