Have Geek Brain

Switch block in jQuery

I would like to click the title link and block the block directly below hide or show (using 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='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='test>Some Text</div>
<div class='test>Some Text</div>
</div>
+2


a source to share


4 answers


Something like this should work:



$("DIV.header A").click(function(){$(this).parent().next().slideToggle();});
0


a source


Try the following:



$(function(){
  $('.header a').click(function(){
    $(this).parent().next().slideToggle();
  });
});
+3


a source 


$(function()
{
    $(".header").click(function()
    {
        $(this).next().toggle();
    });
});

Or, if you want a sliding switch, follow these steps:

$(function()
{
    $(".header").click(function()
    {
        $(this).next().slideToggle();
    });
});
0


a source 


$('.header').click(function(){
  $(this).next(".block").slideToggle("slow", function(){
         $(".block").not(this).slideUp("slow");
   });
});

This code might help solve your problem.

0


a source






More articles:


All Articles