Accordion save last state on reload

Question

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

See Codepen here

$(document).ready(function() { 
$('.b-accordion').accordion({ 
header: '.b-accordion__cell', 
collapsible: true, 
activate: function(e, ui) { 
localStorage.setItem('accordion-active', $(this).accordion("option", "active")); 
}, 
active: +localStorage.getItem('accordion-active') 
}); 
}); 

Любая помощь будет оценена. Спасибо!

Answer 1

Один из способов записи состояния между перезагрузкой страницы (намного проще, чем localStorage) - использовать фрагмент URI hash.

<a> якорный элемент уровня блока в HTML5, так что вы могли бы, например, окружают каждого из ваших <li> элементов списка, например:

<a href="#info"><li class="b-accordion__cell">[CODE HERE]</li></a> 
<a href="#method"><li class="b-accordion__cell">[CODE HERE]</li></a> 
<a href="#material"><li class="b-accordion__cell">[CODE HERE]</li></a> 
<a href="#medium"><li class="b-accordion__cell">[CODE HERE]</li></a> 

Когда страница перезагружается, то hash фрагмент URI будет прямо указывать, какая часть аккордеона должна быть расширена.