Close active accordion item

Question

Я нашел это сладкое меню аккордеона, и я хочу немного его изменить. Я хочу добавить функцию закрытия, поэтому, если я нажму на активную h2, она будет скользить вверх и закрываться. Как я могу это достичь?

$(function() { 
    $('#accordion .content').hide(); 
    $('#accordion h2:first').addClass('active').next().slideDown('slow'); 
    $('#accordion h2').click(function() { 
     if ($(this).next().is(':hidden')) { 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
      $(this).toggleClass('active').next().slideDown('slow'); 
     } 
    }); 
}); 

http://jsfiddle.net/tovic/CzE3q/

Answer 1

Вы должны проверить, чтобы увидеть, если деталь вы нажали на уже имеет active класс. Попробуйте это:

$('#accordion .content').hide(); 
$('#accordion h2:first').addClass('active').next().slideDown('slow'); 

$('#accordion h2').click(function() { 
    var openPanel = !$(this).hasClass('active') 
    $('#accordion h2').removeClass('active').next().slideUp('slow'); 
    openPanel && $(this).toggleClass('active').next().slideDown('slow'); 
}); 

Example fiddle

Answer 2

Добавить else блок обработчика click событие, которое закрывает панель, если она не скрыта.

$(function() { 
    $('#accordion .content').hide(); 
    $('#accordion h2:first').addClass('active').next().slideDown('slow'); 
    $('#accordion h2').click(function() { 
     if($(this).next().is(':hidden')) { 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
      $(this).toggleClass('active').next().slideDown('slow'); 
     }else{ 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
     } 
    }); 
}); 

JS Fiddle:http://jsfiddle.net/CzE3q/720/