Держите открытой мою боковую панель при загрузке новой страницы

Question

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

Я думаю, что моя проблема в том, что я использую сочетание кнопок и div, и мне не удалось дать хорошую инструкцию для двух типов объекта:

<div  id="td-sidebar-menu" class="td-sidebar__inner">
  <form class="td-sidebar__search d-flex align-items-center">
 <input type="search" class="form-control td-search-input" placeholder="&#xf002 Search this site…" aria-label="Search this site…" autocomplete="off">
    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
    </button>
  </form>
  <nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
    {% for section in site.data.toc %}<ul class="td-sidebar-nav__section pr-md-3">
      <li class="td-sidebar-nav__section-title">
        <a  href="{% if section.url %}{{ site.baseurl }}/{{ section.url }}{% else %}{{ section.external_url }}{% endif %}" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">{{ section.title }}</a>
      </li>

      {% for entry in section.links %}
        <button class="dropdown-btn" id="{{ entry.title}}">{{ entry.title }} <i class="fa fa-caret-down"></i> </button>
        {% if entry.item %}
        <div class="dropdown-container active">
          {% for item in entry.item %}
            {% if item.url %}
              <a class="td-sidebar-link td-sidebar-link__page" id="m-{{ section.title | slugify }}-{{ entry.title | slugify }}-{{ item.title | slugify }}" href="{% if item.url %}{{ site.baseurl }}/{{ item.url }}{% else %}{{ item.external_url }}{% endif %}" target="_parent">{{ item.title }}</a>
            {% endif %}
            {% if item.item_div %}
              <button class="dropdown-btn" id="{{ item.title}}">{{ item.title }} <i class="fa fa-caret-down"></i> </button>
                <div class="dropdown-container active">
                  {% for item_page in item.item_div %}

                    {% if item_page.url %}
                      <a class="td-sidebar-link td-sidebar-link__page" id="m-{{ section.title | slugify }}-{{ entry.title | slugify }}-{{ item.title | slugify }}-{{ item_page.title | slugify }}" href="{% if item_page.url %}{{ site.baseurl }}/{{ item_page.url }}{% else %}{{ item_page.external_url }}{% endif %}">{{item_page.title }}</a>
                    {% endif %}

                    {% if item_page.sub_item_div %}
                      <button class="dropdown-btn" id="{{ item_page.title}}">{{ item_page.title  }} <i class="fa fa-caret-down"></i> </button>
                        <div class="dropdown-container active">
                          {% for sub_item_page in item_page.sub_item_div %}
                            <a class="td-sidebar-link td-sidebar-link__page" id="m-{{ section.title | slugify }}-{{ entry.title | slugify }}-{{ item.title | slugify }}-{{ item_page.title | slugify }}-{{ sub_item_page.title | slugify }}" href="{% if sub_item_page.url %}{{ site.baseurl }}/{{ sub_item_page.url }}{% else %}{{ sub_item_page.external_url }}{% endif %}">{{ sub_item_page.title }}</a>
                          {% endfor %}
                        </div>

                    {% endif %}

                  {% endfor %}
                </div>
            {% endif %}


          {% endfor %}
        </div>
        {% endif %}

      {% endfor %}

    {% endfor %}

  </nav>
</div>


<script>
  var dropdown = document.getElementsByClassName("dropdown-btn");
  var i;

  for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
      //this.classList.toggle("active");
      var dropdownContent = this.nextElementSibling;
      if (dropdownContent.style.display === "block") {
        dropdownContent.style.display = "none";
      } else {
        dropdownContent.style.display = "block";
      }

    });
  }

  $(document).ready(function () {
  $('button').click(function() {
      if($(this).attr('class') == "dropdown-btn"){
          //store the id of the collapsible element
          console.log('store new collapse item')
          console.log($(this).attr('id'))
          localStorage.setItem('collapseItem', $(this).attr('id'));
      };
  });

  var collapseItem = localStorage.getItem('collapseItem');
  if (collapseItem) {
    console.log("Read the collapseItem value")
    console.log(collapseItem)
      for (i = 0; i < dropdown.length; i++) {
        if(dropdown[i].id == collapseItem){
          console.log("I found it !")
          dropdown[i].addEventListener("load", function() {
            //this.classList.toggle("active");
            var dropdownContent = dropdown[i].nextElementSibling;
            dropdownContent.style.display = "block";
          });
        }
      }
  }
  })
</script>

Знаете ли вы, если я должен изменить мою реализацию боковой панели или если функция javascript может заключить сделку?

Спасибо