Searle Searle - 1 year ago 65
HTML Question

Keep toggle state on different menu lists

I have a left navigation menu using lists for each menu item.
I am making it so that the user can hide/unhide certain sub menus on the whole menu.


Unfortunately, when you hide one sub menu and then refresh the page, each sub menu takes on this current state instead of just that one. (vice versa when unhiding).

HTML:

<div>
<h1 class="toggler">Messaging</h1>
<ul class="tree">
<a href="#"><li>Link 1</li></a>
<a href="#"><li>Link 2</li></a>
<a href="#"><li>Link 3</li></a>
</ul>
</div>
<div>
<h1 class="tree-toggler">Information</h1>
<ul class="tree">
<a href="#"><li>Link 1</li></a>
<a href="#"><li>Link 2</li></a>
<a href="#"><li>Link 3</li></a>
</ul>
</div>


Script:

$(document).ready(function () {
if(localStorage.getItem("toggleState") == "1")
$('ul.tree').hide();

$('h1.toggler').click(function () {
var ts = localStorage.getItem("toggleState");
if(ts == null || ts == "0") {
var tv = "1";
localStorage.setItem("toggleState", tv);
}else {
var tv = "0";
localStorage.setItem("toggleState", tv);
}
$(this).parent().children('ul.tree').toggle(300);
});
});


How can I make it so that my code saves the state for each individual sub menu list chosen to hide/unhide?

Answer Source
<style> .toggler {cursor: pointer} </style>
<div>
<h1 class="toggler">Messaging</h1>
    <ul class="tree">
        <a href="#"><li>Link 1</li></a>
        <a href="#"><li>Link 2</li></a>
        <a href="#"><li>Link 3</li></a>
    </ul>
</div>
<div>
<h1 class="toggler">Information</h1>
    <ul class="tree">
        <a href="#"><li>Link 1</li></a>
        <a href="#"><li>Link 2</li></a>
        <a href="#"><li>Link 3</li></a>
    </ul>
</div>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var clientStates = [];
$(document).ready(function () {
  $('h1.toggler').click(function (e) {
    $(this).parent().children('ul.tree').toggle(300);
    setTimeout(function() {saveLocalStorage();}, 350);  // wait until the animation is over, then save the state
  });
  loadLocalStorage();
});
function loadLocalStorage() {
  toggleState = JSON.parse(localStorage.getItem("toggleState"));
  if(typeof toggleState === 'object' ) {
    clientStates= toggleState;
  }
  for(var i in clientStates) {
    if(clientStates[i]) {
      $('h1.toggler').eq(i).parent().children('ul.tree').show();
    }
    else {
      $('h1.toggler').eq(i).parent().children('ul.tree').hide();
    }
  }
}
// read from the DOM if elements are visible or not.  Save to localStorage
function saveLocalStorage() {
  clientStates = [];
  $('h1.toggler').each(function() {
    if( $(this).parent().children('ul.tree').is(":visible") ) {
      clientStates.push(true);
    }
    else {
      clientStates.push(false);
    }
  });
  localStorage.setItem("toggleState", JSON.stringify(clientStates));
}
</script>

Just a remark: the children of an UL should be LI elements, so put the A inside the LI

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download