Keep list toggle state on page refresh

Question

I'm having trouble making it so that when a logged in user hides a certain part of the menu for it to stay that way during their session.

$(document).ready(function () {
  $('h1.tree-toggler').click(function () {
    $(this).parent().children('ul.tree').toggle(300);
  });
});

With this HTML:

<div>
  <h1 class="tree-toggler">Heading</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>
    <a href="#"><li>Link 4</li></a>
    <a href="#"><li>Link 5</li></a>
  </ul>
</div>

The toggle works perfectly, but it doesn't stay like it when you change page.

How can I make it stay how it is toggled on the next page?

You could store the state in a server side session or use cookies or client side [local storage/session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) — Quagaar, Jul 27 '17 at 10:47

Shane · Answer 1 · 2017-07-27T11:08:50.457

0

You can use the localStorage API to keep local data.

$(document).ready(function () {

    let storage = localStorage || sessionStorage;

    // let $component = $(document.getElementById('component'));

    if (storage) {
        let state = JSON.parse(storage.getItem('state'));

        if (state) {
            $('h1.tree-toggler').trigger('click');
            // $component.toggle(300);
        }
    }

    $('h1.tree-toggler').click(function () {
        if (storage) {
            storage.setItem('state', (!JSON.parse(storage.getItem('state')) || true))
        }
        $(this).parent().children('ul.tree').toggle(300);
    });
});

You can either toggle the element ($component) manually or trigger the event you already have (h1.tree-toggler[click]).

edited Jul 27 '17 at 11:08

answered Jul 27 '17 at 10:55

Shane

3,049
1
17
18

Sorry, I am still learning javascript at the moment. Would you be able to explain the choices between $component manually or my event that I have? – Searle Jul 27 '17 at 11:10
The variable `$component` would reference to the `ul.tree` element you're accessing using your toggler event. It could be more convenient to store a reference to the element and toggle the visibility that way instead of accessing the toggler -> parent -> children [ul.tree] and call toggle on that element. When using the reference you can simply call `$component.toggle(300)` in the state check and the toggler event. – Shane Jul 27 '17 at 11:14

score 0 · Accepted Answer · answered Jul 27 '17 at 11:10

0

You can follow the link: How to get JS variable to retain value after page refresh?

You can also use the following code for your purpose:

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

  $('h1.tree-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);
  });
});

answered Jul 27 '17 at 11:10

Mahbubul Islam

998
1
10
24

Will I have to individually ID each of my ul lists if I want to make it so if you only hide one, only that one list is hidden. Because your code auto hides all of my ul's even if I only hid one. – Searle Jul 27 '17 at 11:14
You can use individual ID for your each ul. Another way can be using element's index number. But implementing it won't be simple either. – Mahbubul Islam Jul 27 '17 at 11:55

Keep list toggle state on page refresh

2 Answers2