Toggle block in jQuery
I'd like to click a header link and have the block directly underneath hide or show (with slideToggle)
Thanks
<div class='header'><a href='#'>Header</a></div>
<div class='block'>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
</div>
<div class='header'><a href='#'>Header</a></div>
<div class='block'>
<div class='test>Some Text</div>
<div class='t开发者_JAVA技巧est>Some Text</div>
<div class='test>Some Text</div>
</div>
<div class='header'><a href='#'>Header</a></div>
<div class='block'>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
<div class='test>Some Text</div>
</div>
Try this:
$(function(){
$('.header a').click(function(){
$(this).parent().next().slideToggle();
});
});
Something like this should work:
$("DIV.header A").click(function(){$(this).parent().next().slideToggle();});
$(function()
{
$(".header").click(function()
{
$(this).next().toggle();
});
});
Or if you want a sliding toggle try:
$(function()
{
$(".header").click(function()
{
$(this).next().slideToggle();
});
});
$('.header').click(function(){
$(this).next(".block").slideToggle("slow", function(){
$(".block").not(this).slideUp("slow");
});
});
This code can help to solve your problem.
精彩评论