Сохранить несколько бутстраповских панелей состояния с помощью LocalStorage

Question

Я видел эту тему с частью ответа был я искал: Saving multiple panel's collapsed state using cookies with $.cookie()

Но, когда я использую код от ответа, панели уже закрыты. Я бы хотел, чтобы панели открывались по умолчанию. Вместо закрытого.

Это код, который я использовал:

$(".panel .panel-collapse").on('shown.bs.collapse', function() 
{ 
    var active = $(this).attr('id'); 
    var panels= localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels); 
    if ($.inArray(active,panels)==-1) //check that the element is not in the array 
     panels.push(active); 
    localStorage.panels=JSON.stringify(panels); 
}); 

$(".panel .panel-collapse").on('hidden.bs.collapse', function() 
{ 
    var active = $(this).attr('id'); 
    var panels= localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels); 
    var elementIndex=$.inArray(active,panels); 
    if (elementIndex!==-1) //check the array 
    {   
     panels.splice(elementIndex,1); //remove item from array 
    } 
    localStorage.panels=JSON.stringify(panels); //save array on localStorage 
}); 

var panels=localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels); //get all panels 
    for (var i in panels){ //<-- panel is the name of the cookie 
     if ($("#"+panels[i]).hasClass('panel-collapse')) // check if this is a panel 
     { 
      $("#"+panels[i]).collapse("show"); 
     } 
    } 

Это работает .

Надеюсь, я получу хороший ответ.

Спасибо!

Answer 1

Uppdated:

Попробуйте это:

function restoreActiveAccordionGroup() { 
      var last = []; 
      last = $.cookie(); 
      if (last) { 

       //remove default collapse settings from all panels 
       $("#accordion").removeClass('in'); 
       for (var i in last) { 
       //restore the last visible panel group in all nested levels 
       $("#" + i).addClass("in"); 
       } 

      } 
     } 

Старый

Просто добавьте in класс к каждому panel-collapse класса. Это приведет к тому, что вся панель останется открытой по умолчанию после загрузки страницы.

<div id="panel1" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     </div> 
</div>