jQuery accordion: remove active class when clicking active label

Question

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.

Answer 1

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);
});

Answer 2

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);
});

Answer 3

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.