list item stay open on click a link or reload/refresh page

Question

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.

Saw something, that I can store data in local-storage, but I do not know how.

HTML:

<aside id="sidebar" class="col-12 col-lg-4 col-xxl-3">
  <div class="just-padding">

    <ul>
      <li  id="server">Server</li>
        <ul>
          <li id="multiCollapseExample1">
            <span>
              <a href="{{ route('ubuntustart') }}">Start</a>
            </span>
          </li>
          <li id="multiCollapseExample2">
            <span>
              <a href="{{ route('ubuntuinit') }}">Security</a>
            </span>
          </li>
        </ul>
    
      <li id="git">GIT</li>
        <ul>
          <li id="multiCollapseExample3">
            <span>
              <a href="#1">blub</a>
            </span>
          </li>
          <li id="multiCollapseExample4">
            <span>
              <a href="#2">wurst</a>
            </span>
          </li>
        </ul>
    </ul>
  </div>
</aside>

jQuery:

$(document).ready(function () {
   
    $("#multiCollapseExample1").hide();
    $("#multiCollapseExample2").hide();
    $("#multiCollapseExample3").hide();
    $("#multiCollapseExample4").hide();


    $("#server").click(function() {
        
        localStorage.setItem('clickedItem', '#server');
        
        $("#multiCollapseExample3, #multiCollapseExample4").hide();
        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });

    $("#git").click(function() {
        
        localStorage.setItem('clickedItem', '#git');
        
        $("#multiCollapseExample1, #multiCollapseExample2").hide();
        $("#multiCollapseExample3, #multiCollapseExample4").show();
        
    });

    $("#multiCollapseExample1").click(function() {

        localStorage.setItem('clickedSub', '#multiCollapseExample1');

        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });

    $("#multiCollapseExample2").click(function() {

        localStorage.setItem('clickedSub', '#multiCollapseExample2');

        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });



    if(localStorage.getItem('clickedSub')) {

        var test = $(localStorage.getItem('clickedSub')).click()
        
        $(test).addClass("active");
    
    };

    
    
    if(localStorage.getItem('clickedItem')) {

        $(localStorage.getItem('clickedItem')).click()
        
        $(this).addClass("active");
    
    };


});

I have edited my answer (the jquery part)

A new JSFiddle: JSFiddle

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.

Answer 1

I have modified your code as you wanted. Please check jsfiddle

What i did was just set the clicked item to localstorage. I have saved its id..

Then when refresh the page i check does localstorage exist the key added to localstorage(it should exist if you clicked a item). Then based on that value I have clicked the related item via click() method.

Just modified your Jquery as bellow

$(document).ready(function () {

$("#multiCollapseExample1").hide();
$("#multiCollapseExample2").hide();
$("#multiCollapseExample3").hide();
$("#multiCollapseExample4").hide();


$("#server").click(function() {
    localStorage.setItem('clickedItem', '#server');
    $("#multiCollapseExample3, #multiCollapseExample4").hide();
    $("#multiCollapseExample1, #multiCollapseExample2").show();
    
});

$("#multiCollapseExample1").click(function() {
    $("#multiCollapseExample1, #multiCollapseExample2").show();
    $("#multiCollapseExample1").addClass('active');
    
});

$("#git").click(function() {
    localStorage.setItem('clickedItem', '#git');
    $("#multiCollapseExample1, #multiCollapseExample2").hide();
    $("#multiCollapseExample3, #multiCollapseExample4").show();
    
});


$("li span").click(function() {
      
    $(this).addClass("active");

});


  if(localStorage.getItem('clickedItem')) {
    $(localStorage.getItem('clickedItem')).click()
   }

});

By the way I dont recommend you to use ids to click event. So if there are 100 items then based on your code you need to write more and more logic. Instead of that use another mechanism to achieve this. Thanks