Preserve the opened/closed state of my sub-menus when navigate to another page using javascript

Question

How can I preserve the opened/closed state of my sub-menus when navigating to another page using JavaScript? I tried this code to maintain state of menu when navigating to another page but it is not working for me. Maybe I missed something.

<ul class="catMenuItem">
    <li><a style="background-image: url(&quot;images/triangle_down.gif&quot;);" href="#"
        class="titleTriangle"><span>cat1</span></a></li>
    <li style="display: block;" class="catSubMenu">
        <a href="?cat=2">sub 1-2</a> (0)
        <a href="?cat=7">sub 1-3</a> (2)
        <a href="?cat=8">sub 1-4</a> (0)
        <a href="?cat=9">sub 1-5</a> (0)
    </li>
</ul>
<ul class="catMenuItem">
    <li>
        <a href="#" class="titleTriangle"><span>cat2</span></a>
    </li>
    <li style="display: none;" class="catSubMenu">
        <a href="?cat=3">sub 2-1</a> (0)<br>
        <a href="?cat=4">sub 2-2</a> (0)<br>
        <a href="?cat=5">sub 2-3</a> (0)<br>
        <a href="?cat=6">sub 2-4</a> (1)<br>
        <br>
    </li>
</ul>

var prevCat;
function menu(newCat) {
    var mens;
    var anchors;
    if (prevCat) {
        mens = prevCat.parentNode.getElementsByTagName('li')[0];
        anchors = mens.getElementsByTagName('a')[0].style.backgroundImage = 'url(images/triangle_right.gif)';
        prevCat.style.display = 'none';
    }

    if (newCat != prevCat) {
        mens = newCat.parentNode.getElementsByTagName('li')[0];
        anchors = mens.getElementsByTagName('a')[0].style.backgroundImage = 'url(images/triangle_down.gif)';
        newCat.style.display = 'block';
        prevCat = newCat;
    } else {
        prevCat = null;
    }

}

onload = function () {
    var menus = document.getElementsByTagName('ul');
    for (var a = 0, x = menus.length; a < x; a++) {
        if (menus[a].className === 'catMenuItem') {
            menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function () {
                menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
            }
            menus[a].getElementsByTagName('li')[1].style.display = 'none';
        }
    }
}

score 0 · Answer 1 · edited May 23 '17 at 12:29

This code is not working because the browser navigates to another page when you click on one of your menu items. The value of prevCat is always null in this case because javascript variables do not persist across page loads. The code, which you most likely took from the internet, is intended for the case when you stay on the same page - in such case the value of prevCat will not be cleared by each page load.

What you need is to store the state in localStorage (see this and this for reference) every time it changes and restore it on page load.

score 0 · Answer 2 · answered Apr 04 '13 at 07:15

In order to persist this information across different pages you'll need to store it some way, either on client or on server.

I'd recommend you to use cookies to store the prevCat's value and retrieve it from cookies when loading the page.

For more details on how to set a cookie and retrieve it's value, see this useful tutorial.

Preserve the opened/closed state of my sub-menus when navigate to another page using javascript

2 Answers2