CODEWITHSUNDEEP
jqueryslidetoggletoggleclass
Unknownmale
Unknownmale

Reputation: 37

How to toggle this jsfiddle

I'm trying to make this toggle, so if you click on one, the other closes etc

Any ideas? This is for a dynamic page so I can't add unique IDs to them.

http://jsfiddle.net/lecollective/rhowLf9x/

$(document).ready(function() {  
 $(".cat-lead").click(function(e) {

   $(this).next(".product-list").slideToggle(500, 'linear'),
   $(this).toggleClass('droppedlist');
    e.preventDefault();

   });
});

var isActive = $(this).hasClass('droppedlist');
$('.product-list').removeClass('droppedlist'); 

$(this).stop(true,true);
if(!isActive){
    $(this).addClass("droppedlist");
}

Any help would be great!

Upvotes: 0

Views: 455

Answers (1)

Stryner
Stryner

Reputation: 7318

At the start of every click event, you could reset all of them that are not the current element:

var $allCats = $(".cat-lead");
$allCats.click(function(e) {
    //[Step 1] - Reset Others
    $allCats.not(this) //Exclude Clicked one
            .removeClass('droppedlist') //Remove *active* class (if exists)
            .next(".product-list") //Get All Lists
            .slideUp(500, 'linear'); //If already up, no effect shown

    //[Step 2] - Modify Current
    $(this).next(".product-list").slideToggle(500, 'linear'),
    $(this).toggleClass('droppedlist');
    e.preventDefault();
});

Updated Fiddle: http://jsfiddle.net/rhowLf9x/4/

Upvotes: 2

Related Questions