title: list item stay open on click a link or reload/refresh page
body: <p>I want that my unordered list stays open if I click a list-item/link or I refresh/reload the page/site. And the list-item/link should have the class active.</p>
  <p>Saw something, that I can store data in <em><strong>local-storage</strong></em>, but I do not know how.</p>
  <p>HTML:</p>
  <pre><code>&lt;aside id=&quot;sidebar&quot; class=&quot;col-12 col-lg-4 col-xxl-3&quot;&gt;
    &lt;div class=&quot;just-padding&quot;&gt;
  
      &lt;ul&gt;
        &lt;li  id=&quot;server&quot;&gt;Server&lt;/li&gt;
          &lt;ul&gt;
            &lt;li id=&quot;multiCollapseExample1&quot;&gt;
              &lt;span&gt;
                &lt;a href=&quot;{{ route('ubuntustart') }}&quot;&gt;Start&lt;/a&gt;
              &lt;/span&gt;
            &lt;/li&gt;
            &lt;li id=&quot;multiCollapseExample2&quot;&gt;
              &lt;span&gt;
                &lt;a href=&quot;{{ route('ubuntuinit') }}&quot;&gt;Security&lt;/a&gt;
              &lt;/span&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
      
        &lt;li id=&quot;git&quot;&gt;GIT&lt;/li&gt;
          &lt;ul&gt;
            &lt;li id=&quot;multiCollapseExample3&quot;&gt;
              &lt;span&gt;
                &lt;a href=&quot;#1&quot;&gt;blub&lt;/a&gt;
              &lt;/span&gt;
            &lt;/li&gt;
            &lt;li id=&quot;multiCollapseExample4&quot;&gt;
              &lt;span&gt;
                &lt;a href=&quot;#2&quot;&gt;wurst&lt;/a&gt;
              &lt;/span&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/aside&gt;
  </code></pre>
  <p>jQuery:</p>
  <pre><code>$(document).ready(function () {
     
      $(&quot;#multiCollapseExample1&quot;).hide();
      $(&quot;#multiCollapseExample2&quot;).hide();
      $(&quot;#multiCollapseExample3&quot;).hide();
      $(&quot;#multiCollapseExample4&quot;).hide();
  
  
      $(&quot;#server&quot;).click(function() {
          
          localStorage.setItem('clickedItem', '#server');
          
          $(&quot;#multiCollapseExample3, #multiCollapseExample4&quot;).hide();
          $(&quot;#multiCollapseExample1, #multiCollapseExample2&quot;).show();
          
      });
  
      $(&quot;#git&quot;).click(function() {
          
          localStorage.setItem('clickedItem', '#git');
          
          $(&quot;#multiCollapseExample1, #multiCollapseExample2&quot;).hide();
          $(&quot;#multiCollapseExample3, #multiCollapseExample4&quot;).show();
          
      });
  
      $(&quot;#multiCollapseExample1&quot;).click(function() {
  
          localStorage.setItem('clickedSub', '#multiCollapseExample1');
  
          $(&quot;#multiCollapseExample1, #multiCollapseExample2&quot;).show();
          
      });
  
      $(&quot;#multiCollapseExample2&quot;).click(function() {
  
          localStorage.setItem('clickedSub', '#multiCollapseExample2');
  
          $(&quot;#multiCollapseExample1, #multiCollapseExample2&quot;).show();
          
      });
  
  
  
      if(localStorage.getItem('clickedSub')) {
  
          var test = $(localStorage.getItem('clickedSub')).click()
          
          $(test).addClass(&quot;active&quot;);
      
      };
  
      
      
      if(localStorage.getItem('clickedItem')) {
  
          $(localStorage.getItem('clickedItem')).click()
          
          $(this).addClass(&quot;active&quot;);
      
      };
  
  
  });
  </code></pre>
  <p><strong>I have edited my answer (the jquery part)</strong></p>
  <p>A new JSFiddle:
  <a href="https://jsfiddle.net/aypq0umo/2/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p>The active list item in red do not save the state if I go back (backwards / browser arrow). But it keep the state on reload/refresh.</p>