Расширение/Сворачивание Div

Question

У меня есть следующий код для элемента утолщения JQuery Div:

$(document).ready(function() 
{ 
//Add Inactive Class To All Accordion Headers 
$('.accordion-header').toggleClass('inactive-header'); 

//Set The Accordion Content Width 
var contentwidth = $('.accordion-header').width(); 
$('.accordion-content').css({'width' : contentwidth }); 

//Open The First Accordion Section When Page Loads 
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header'); 
$('.accordion-content').first().slideDown().toggleClass('open-content'); 

// The Accordion Effect 
$('.accordion-header').click(function() { 
    if($(this).is('.inactive-header')) { 
     $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
     $(this).toggleClass('active-header').toggleClass('inactive-header'); 
     $(this).next().slideToggle().toggleClass('open-content'); 
    } 

    else { 
     $(this).toggleClass('active-header').toggleClass('inactive-header'); 
     $(this).next().slideToggle().toggleClass('open-content'); 
    } 
}); 

return false; 
}); 

Этот код позволяет только один DIV будет открыт в то время. (Когда кто-то открывается, и я нажимаю на другой, первый закрывается.) Как его изменить, чтобы я мог открывать (развернуть) несколько div в любой момент времени.

Большое спасибо

Answer 1

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

$('.accordion-header').click(function() { 
    if($(this).is('.inactive-header')) { 
     // I think this line is the one thats toggling everything and closing 
     //all the open ones so try commenting it out 
     //$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
     $(this).toggleClass('active-header').toggleClass('inactive-header'); 
     $(this).next().slideToggle().toggleClass('open-content'); 
    } 

    else { 
     $(this).toggleClass('active-header').toggleClass('inactive-header'); 
     $(this).next().slideToggle().toggleClass('open-content'); 
    } 
});