1

I am trying to save menu state using localstorage. i am using below jquery code to toggle my menu

    <nav id="sidebar" class="active">

    <ul class="menu">
    <li> <a href="#">Customer</a> </li>
    <li> <a href="#">Sales</a> </li>
    </ul>
    </nav>

    <div>
   <button id="sidebarCollapse"> Collapse </button>
    Right Content
    </div>

my jquery code

    <script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $("#sidebarCollapse").on("click", function () {
            $("#sidebar").toggleClass("active");
            $(this).toggleClass("active");


        });
    });
</script>

my menu show/hide functionality is working well. but when i hide the menu and reload, menu will show again. how i save menu state using localstorage? can you help me.

Aqua 4
  • 771
  • 2
  • 9
  • 26
kumara
  • 877
  • 4
  • 19
  • 43

1 Answers1

1

Found a solution in this thread and applied. Hope it works.

   $('#sidebar').toggleClass(window.localStorage.toggled);


   $("#sidebarCollapse").on("click", function () {
       if (window.localStorage.toggled != "with_toggle" ) {
          $("#sidebar").toggleClass("active", true);
          $(this).toggleClass("active", true);
          window.localStorage.toggled = "with_toggle";
       } else {
          $("#sidebar").toggleClass("active", false );
          $(this).toggleClass("active", false );
          window.localStorage.toggled = "";
       }

   });
vimuth
  • 5,064
  • 33
  • 79
  • 116