Сохранение/Восстановка иерархии аккордеона

accordeonHierarchy.js

$(document).ready(function () {
  // После загрузки страницы мы достаем откуда-то сохраненную 
  // информацию об иерархии (что активированно)
  // эта функция должна вызываться первой после загрузки страницы
  // == ПОГНАЛИ ==
  // Достаем откуда-то данные о статусе, например из куки
  let savedAccordeonHierarchy = $.cookie('ZHOPA'); // не имеет значение, как мы их назовем
  // savedAccordeonHierarchy - это строка, поэтому если мы сохраняли массив, 
  // надо сериализовать данные, но пропустим

  // В зависимости от данных восстанавливаем иерархи

  // Как можно прочитать ниже (в другой функции), мы сохранили айдишники всех активных ul, таким образом мы можем
  for ( var i = 0; i < savedAccordeonHierarchy.lenght; i++) {
    let activeClass = savedAccordeonHierarchy[i]
    // "."+activeClass получится что-то типа ".uniqId2"
    // Что позволит нам найти нужный ul
    $("."+activeClass).toggleClass('active')
  }
  // == ЗАКОНЧИЛИ ГНАТЬ ==

  // описываем что по нажатию сначала должен переключиться актив
  $('ul.list-1 > li > span').click(function() {
    $("ul.list-1 ul").toggleClass('active');
  });

  // Описываем, что после каждого нажатия на span должна сохраняться иерархия
  // == СНОВА ПОГНАЛИ ==
  $('ul > li > span').click(function() {
    /** Если кликнули на спан, нам нужно узнать какие элементы сейчас активны, 
    и каким-то образом узнать их позиции
    в иделае, конечно, мы имеем следующую структуру:

    
    <ul id="uniqId"class="active">
      <li><span>Какой-то текст<>
      </li>
      <li ><span>Какой-то текст<></li>
      <ul id="uniqId2">
        <li><span>Какой-то текст<>
        <ul id="uniqId3" class="active">
          <li><span>Какой-то текст<>
        </li>
      </ul>
    </ul>

    Таким образом, мы можем получить !ВСЕ! ul, у которых class="active", запомнить их id, т.к. они уникальны
    примерно в следующую структуру
    activeUlsClasses = ["uniqId2", "uniqId5"]
    */
    
    // например. ЭТО ПРИМЕР
    let allActiveUls = $( ".active" )
    let activeUlsClasses = allActiveUls.map(function(element) { return element.attr("class") })
    
    // После того, как мы узнали, какие li активны, мы сохранили их в отдельную переменную и записываем в куки
    // НЕ ЗАБЫВАЕМ СЕРИАЛИЗОВАТЬ ПЕРЕД ТЕМ КАК СОЗРАНЯТЬ
    $.cookie('ZHOPA', activeUlsClasses); // важно, чтобы при сохранении и загрузки из кук, мы брали их по одному и тому-же названию
  })
  // == СНОВА ЗАКОНЧИЛИ ==
});