CODEWITHSUNDEEP
asp.netjquery
Bill
Bill

Reputation:

jQUERY - accordion active state asp.net code behind

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

Upvotes: 3

Views: 8638

Answers (4)

tecnocrata
tecnocrata

Reputation: 88

I Just use

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

that maintains the status of the selected option

Upvotes: 0

Paul
Paul

Reputation: 2206

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

Upvotes: 1

Paul
Paul

Reputation: 2206

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

Upvotes: 2

redsquare
redsquare

Reputation: 78667

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

Upvotes: 3

Related Questions