CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uinavigation
Al Augustin
Al Augustin

Reputation: 160

Accordion menu collapsing when on active page

I've built a vertical accordion nav with jQuery 1.4.3 and jQuery UI 1.8.5 in order to support the hoverintent version of the accordion widget.

It works as expected, however the menu collapses when the user navigates to another page.

Is there something that I have overlooked?

The HTML

<nav class="span3">
<a href="index.html"><img src="img.png" width="250" /></a>
<ul class="wrap" id="mainNav">
    <li>
        <a href="javascript:void(0);" class="accordionButton">Lorem</a>
        <ul class="accordionContent" style="display: none;">
            <li>
                <a href="javascript:void(0);">Ipsum</a>
            </li>
            <li class="">
                <a href="javascript:void(0);">Dolor</a>
            </li>
            <li>
                <a href="javascript:void(0);">Sit</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Amet</a>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Consectetur</a>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Adipiscing</a>
    </li>
    <li>
        <a href="javascript:void(0);" class="accordionButton accordionButton noChild">Elit</a>
    </li>
</ul>
</nav>

The JavaScript

// verticle menu
function vertAccordHover() {"use strict";
    $accButtons.mouseover(function() {
        $(this).addClass('hover');
    }).mouseout(function() {
        $(this).removeClass('hover');
    });
}

function vertAccord() {"use strict";

    $("#mainNav").accordion({
        event : "mouseover",
        alwaysOpen : false,
        autoHeight : false,
        navigation : true,
        collapsible : true
    });

    $('.noChild').unbind('mouseover');
    $('#mainNav').accordion('activate', 0);                
    $('#mainNav').accordion( "option", "navigation", true );

    vertAccordHover();
}

Upvotes: 0

Views: 418

Answers (1)

Savv
Savv

Reputation: 431

Your accordion would collapse every time you go to a new page because your browser reloads the page from scratch. You don't have a way to store the state of your accordion before exiting a page. You could probably do this by storing a cookie on your user's browser

Upvotes: 1

Related Questions