Accordion Active: false but changes to active: activeIndex when clicked
I am using an Accordion and would like for all sections to be collapsed when the page opens. I have code that will do just that. Inside the first section in an asp.listview with paging. I do not want the section to collapse and reopen when I am paging. This code works great for the page opening with all sections collapsed but collapses and reopens when paging:
$("#accordion").accordion({
collapsible: true,
autoHeight: false,
active: false,
heightStyle: "content"
});
});
This code works for the paging aspect but the first section is expanded when the page opens, which is what I do not want.
$(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
collapsible: true,
autoHeight: false,
event: "mousedown",
active: activeIndex, //allows the accordion not to collapse when paging
heightStyle: "content",
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
collapsible: true,
autoHeight: false,
event: "mousedown",
active: activeIndex, //allows the accordion not to collapse when paging
heightStyle: "content",
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
Is there a way to have it both ways, collapsed when the pages opens but have the sections with the listview remain open while paging? It appears this would work if I could have the second code run only after the page loads.
I hope this is not too confusing.
Thanks!