CODEWITHSUNDEEP
jqueryslidetoggle
user0129e021939232
user0129e021939232

Reputation: 6355

jQuery slideToggle, slide up other elements

Hi I am using jQuery slide toggle on two nested ul's, however when I click on the secondary ul the other ul doesn't slide up.

How can I get jQuery to detect the correct one and slide this up?

I Have a jsFiddle as an example of what I'm doing. Any suggestions as to what I can do differently?

Code example:

<ul class="top-category four columns">
    <li class="filter-title">Filter by: Blog Categories <span class="icon-arrow-down3"></span>

        <ul class="child-category">
            <li class="filter-item">
                <input type="checkbox" id="tag_278" name="blog_categories[]" class="fintech siteset-checkbox" value="FinTech" data-name="FinTech">FinTech</li>
        </ul>
    </li>
</ul>
<ul class="top-category four columns">
    <li class="filter-title">Filter by: Staff <span class="icon-arrow-down3"></span>

        <ul class="child-category">
            <li class="filter-item">
                <input type="checkbox" id="tag_283" name="staff[]" class="jan_stannard siteset-checkbox" value="Jan Stannard" data-name="Jan Stannard">Jan Stannard</li>
        </ul>
    </li>
</ul>

jquery 

  $( ".filter-title" ).click(function() { 
         $(this).children().nextAll('.child-category').slideToggle();
  });

css

 .child-category {display:none}

Upvotes: 2

Views: 1675

Answers (2)

Roumelis George
Roumelis George

Reputation: 6746

Try this:

$( ".filter-title" ).click(function() { 
     var child = $(this).children('.child-category') ,
         rest = $('.child-category:visible').not(child);

     child.slideToggle(); //toggle current one
     rest.slideUp(); //close the rest

});

Fiddle

Upvotes: 2

Jai
Jai

Reputation: 74738

Try with this:

 $(".filter-title").click(function () {
     $('.child-category:visible').stop(true, true).slideToggle(); // <---add this line
     $(this).find('.child-category').stop(true, true).slideToggle();
 });

Upvotes: 0

Related Questions