Как сделать коллапс аккордеона jQuery?

Question

Вот код:

(function($) { 

var allPanels = $('.accordion > dd').hide(); 

$('.accordion > dt > a').click(function() { 
allPanels.slideUp(); 
$(this).parent().next().slideDown(); 
return false; 
}); 

})(jQuery); 

http://jsfiddle.net/chriscoyier/VPfJ5/3/

Как сделать развал аккордеон панель при повторном нажатии?

Answer 1

Это ответ:

(function($) { 

var allPanels = $('.accordion > dd').hide(); 

$('.accordion > dt > a').click(function() { 
    allPanels.slideUp(); 

    if($(this).parent().next().is(':hidden')) 
    { 
     $(this).parent().next().slideDown(); 
    } 

    return false; 
}); 

})(jQuery); 

Answer 2

Намного проще и пуленепробиваемый подход: LIVE DEMO

var allPanels = $('.accordion > dd').hide(); 

$('.accordion > dt > a').click(function(e) { 
    e.preventDefault(); // don't use return false; 
    allPanels.stop().slideUp(); 
    $(this).parent().next('dd').stop().slideToggle(); 
}); 

Хитрость заключается в том, чтобы

• slideUp все панели
• но использовать slideToggle на текущий один
• пуленепробиваемые благодаря правильному использованию .stop()

_{P.S: Не злоупотреблять return false, использовать правильный event.preventDefault вместо этого.}