CODEWITHSUNDEEP
jqueryaccordion
Works for a Living
Works for a Living

Reputation: 1293

jQuery accordion: remove active class when clicking active label

I've got a simple accordion that allows all to collapse. So clicking on the active panel collapses it. I have before and after pseudo-classes assigned for the arrows, but I can't figure out how to remove the active class from the active label when clicking on it to collapse it. Active class will be removed if clicking on a different label, but not if clicking on the active label to collapse it.

Here's a fiddle.

And here's the script:

$(".accordion > dt").click(function(){
    $('.active').removeClass('active');

    $(this).addClass('active');
    if(false == $(this).next().is(':visible')) {
        $('.accordion > dd').slideUp(600);
    }
    $(this).next().slideToggle(600);
});

I've tried a couple of different configurations (e.g., reversing the if(false) statement and removing active class), but everything I've tried has been a shot in the dark. Any help appreciated.

Upvotes: 0

Views: 3820

Answers (3)

Subedi Kishor
Subedi Kishor

Reputation: 5996

It is because your active class is added to the dt element each time you click. You only add the active class if there are no active classes present that means if none of the dd elements are visible. So you need to change to

$(".accordion > dt").click(function(){
    $('.active').removeClass('active');
    if(false == $(this).next().is(':visible')) {
        $('.accordion > dd').slideUp(600);
        $(this).addClass('active');
    }
    $(this).next().slideToggle(600);
});

Check the Updated Demo Fiddle.

Upvotes: 1

bipen
bipen

Reputation: 36531

using toggleClass() and siblings()

try this

    $(".accordion > dt").click(function(){
    //$('.active').removeClass('active');
         $(this).toggleClass('active').siblings('dt').removeClass();

          if(false == $(this).next().is(':visible')) {
    $('.accordion > dd').slideUp(600);
          }
       $(this).next().slideToggle(600);
});

Upvotes: 1

Ganesh D
Ganesh D

Reputation: 2111

try

    $(".accordion > dt").click(function(){
    $('.active').removeClass('active');

    if(false == $(this).next().is(':visible')) {
        $(this).addClass('active');
        $('.accordion > dd').slideUp(600);
    }
    $(this).next().slideToggle(600);
});

Upvotes: 2

Related Questions