Search jQuery

jQuery Forum

geoff.jqu..

Linkable Header and Persistant State for Accordion

in Using jQuery UI • 13 years ago

Hi,
I'm trying to implement the accordion navigation menu for one of my
sites and have a quick question on how to properly set up the call...I
went through the documentation and I think that I'm obviously missing
something...
I want the header to be a link as well as any content within the div
to contain links. So something like...
Guitars (links to guitars.html)
- Electric (links to guitarsElectric.html)
- Accoustic (links to guitarsAccoustic.html)
Drums (drums.html)
- big (bigdrums.html
- small (smalldrums.html
Then, when I click on a header I want the header to expand and the
browser to link to the coresponding page. Once the new page renders
the clicked on header should already be expanded.
I know I can set the active menu item like this...but I don't know how
to make this choice persistant between page loads
$("#category-menu").accordion({ header: "h3", active: 2 });
Any advice?
Thanks!
Geoff

Replies(3)

kartik.se..

Re: Linkable Header and Persistant State for Accordion

13 years ago

Hi,
Technically what you are trying to do may be achievable, but I have a suggestion for achieving the same feature in a slightly different manner:
1. Instead of redirecting your visitor to a different page altogether and then try to recreate the same state, just use one of jQuery's ajax calls including $.post and (selector).load and the same content can be loaded into a div. This way you can avoid writing code for maintaining accordian state.
2. go through <a href="http://www.jqueryui.com/demos/accordion/#event-changestart">http://www.jqueryui.com/demos/accordion/#event-changestart</a> and in this event, based on the tab being activated, make the load or post call.
I am not sure how far you are into the development of the site and what is the impact on other aspects of the site in this change, but it will definitely reduce the amount of state maintenance you need to do and even make the site faster.
Thank you,
Kartik Sehgal

daniellez1

Re: Linkable Header and Persistant State for Accordion

13 years ago

Hi,
I can confirm that the code on the following page will enable
persistence between page loads:
http://dev.jqueryui.com/ticket/3613
Using this exact accordion (http://jqueryui.com/demos/accordion/), I
replaced...
$("#accordion").accordion({
    header: "h3",
    autoHeight: false
});
With...
var accordion = $("#accordion");
var index = $.cookie("accordion");
var active;
if (index !== null) {
    active = accordion.find("h3:eq(" + index + ")");
} else {
    active = 0
}
accordion.accordion({
    header: "h3",
    event: "click hoverintent",
    active: active,
    change: function(event, ui) {
        var index = $(this).find("h3").index ( ui.newHeader[0] );
        $.cookie("accordion", index, {
            path: "/"
        });
    },
    autoHeight: false
});
Also, you need to reference the jQuery cookie plugin:
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
Voila!

roberto.s..

Re: Linkable Header and Persistant State for Accordion

13 years ago

Did you get this to work? I need the same functionality.

Top Reply

Response title

Attachments

jQuery Forum

Linkable Header and Persistant State for Accordion

Replies(3)

Re: Linkable Header and Persistant State for Accordion

Re: Linkable Header and Persistant State for Accordion

Re: Linkable Header and Persistant State for Accordion

Statistics

Tags

Actions