CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

jQuery slideToggle parent and children

Here is my code

<li class="page_item "><a href="javascript:">A</a>
<ul class="children">
    <li class="page_item"><a href="">1</a></li>
    <li class="page_item"><a href="">2</a></li>
</ul>
</li>
<li class="page_item "><a href="">B</a>
<ul class="children">
    <li class="page_item"><a href="">1</a></li>
    <li class="page_item"><a href="">2</a></li>
    <li class="page_item"><a href="">3</a></li>
    <li class="page_item"><a href="">4</a></li>
</ul>
</li>

<li class="page_item "><a href="">C</a>
<ul class="children">
    <li class="page_item"><a href="">1</a></li>
    <li class="page_item"><a href="">2</a></li>
    <li class="page_item"><a href="">3</a></li>
    <li class="page_item"><a href="">4</a></li>
</ul>
</li>

$('.page_item').click(function(){

    $('ul.children').slideToggle();
 });
ul.children{
  display: none;
}

online sample

How can I make like that, when I click A section, just to open A section's children when I click B, just show B's. not open the whole sections opened. Thanks

Upvotes: 1

Views: 1531

Answers (2)

Travis J
Travis J

Reputation: 82337

Scope the slide toggle to the current element, using this:

$('.page_item').click(function(){
  var that = this;
  $('.page_item').each(function(){
   if(that == this)return true;//continue
   $('.children:not(:hidden)',this).slideToggle();
  });
  $('ul.children',this).slideToggle();
});

Edited to close other shown list. jsFiddle Demo

Upvotes: 6

Piet van Dongen
Piet van Dongen

Reputation: 1639

Like this:

$('.page_item').click(function(){
    $('ul').slideUp();
    $(this).find('ul').slideToggle();

    return false;
 });

Upvotes: 1

Related Questions