jQUERY - accordion active state asp.net code behind

Question

Hi there,

Can anyone inform me how to maintain the jquery accordion active state panel when changing pages. Ideally i would like to change in the code-behind however really happy to just get it working.

developing in asp.net 3.5

Hope this helps

Thanks

Answer 1

Example here. If you select one of the accordion headers then refresh the page the last accordian panel you clicked is opened by default

I see this as a pure client responsibility. I would store the information in a cookie plugin here which you can read and pass to the accordion constructor. I would prefer this over passing values to and from the server for no real benefit.

Something along these lines

//get persisted active accoridan index
var activeIndex  = $.cookie('accordianActiveIndex');

//guard code here to check you have a valid activeIndex...

$('.selector').accordion({
       active: activeIndex,
       change: function(event, ui) { 
           //set cookie here to new active header (index)
           $.cookie('accordianActiveIndex', ui.newHeader.prevAll().length)
      }
});

Answer 2

For anyone with a similar problem getting cookies to work with jQuery UI Accordion, I've solved it by adding one line to redsquare's code.

The cookie value activeIndex needs to be parsed as an integer:

//get persisted active accoridan index
var activeIndex  = $.cookie('accordianActiveIndex');
activeIndex = parseInt(activeIndex, 10);

//guard code here to check you have a valid activeIndex...

$('.selector').accordion({
       active: activeIndex,
       change: function(event, ui) { 
           //set cookie here to new active header (index)
           $.cookie('accordianActiveIndex', ui.newHeader.prevAll().length)
      }
});

Answer 3

And here's another way to save UI Accordion state using the cookie.js plugin:

(source)

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
});

Answer 4

I Just use

$( ".selector" ).accordion({ navigation: true });

that maintains the status of the selected option