Question

I’ve got a page where I’m having several different sub-nav elements on it on various

My mark-up is (basically)

<div class="sub-nav">
 <div class="sub-nav-btn"></div>
  <ul>
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn"></div>
  <ul>
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn"></div>
  <ul>
  </ul>
</div>

my current jquery is

$('.sub-nav ul').css("display","none");
$('.sub-nav-btn').click(function(){
$('.sub-nav ul').toggle();
return false;
});

currently this works but opens all of the relevant elements called. How do I get the jquery working so it only calls the relevant element and not all

Answer 1

HIya demo http://jsfiddle.net/4aMwA/ or more organized fiddle here: http://jsfiddle.net/s2CtY/

slideToggle http://api.jquery.com/slideToggle/

So the way this work is I have put some sample text for demo ** click on foo and you will see its ul and if you click on fp you will see its ul sliding down so on and so forth.

jquery code

  $(document).ready(function () {

 $('.sub-nav ul').css("display","none");
    // Watch for clicks on the "slide" link.
    $('.sub-nav-btn').click(function () {
        $(this).next(".sub-nav ul").slideToggle(400);
        return false;
    });


});​