Retain Jquery accordion current index across the asp.net post back




Retain Jquery accordion current index across the asp.net post back. We need to use a hidden field here to save the current index so we can retrieve it back on the post back. JQuery Rocks and flying high.

ASP.Net code
<asp:HiddenField ID=”hfaccordion” runat=”server” />
<div id=”accordion”>
<h3>
<a href=”#”>Test 1</a></h3>
<div>
Test 1
<asp:Button ID=”Button2″ runat=”server” Text=”Post” />
</div>
<h3>
<a href=”#”>Test 2</a></h3>
<div>
Test 2
<asp:DropDownList ID=”DropDownList2″ runat=”server” AutoPostBack=”true”>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</div>
</div>

JQuery Code

<script type=”text/javascript”>
$(document).ready(function() {
var active = $(‘#<%= hfaccordion.ClientID %>’).val();
var currentindex= 0;
if (active != ”) {
currentindex = active;
}

$(“#accordion”).accordion(
{
change: function(event, ui) {
var i = $(“#accordion”).accordion(“option”, “active”);
$(‘#<%= hfaccordion.ClientID %>’).val(i);
}
}
);

$(“#accordion”).accordion(“activate”, parseInt(currentindex));
});

});

</script>

If your accordion control is inside update control panel then you have to re-initialize it.

function pageLoad(sender, args) {

if (args.get_isPartialLoad()) {
setAccordion();
setTabs();

}

}

Note: Please use latest jQuery version




Tags:

5 Responses to “Retain Jquery accordion current index across the asp.net post back”

  1. blois says:

    Not work.

  2. What’s the problem? can you post your code?

  3. instadead says:

    Here is the code I’m using in a MVC master page, but unfortunately after clicking a link in the Accordion it still doesn’t go back to the active index.

    $(document).ready(function () {
    var active = $(‘#’).val();

    var currentindex = 0;
    if (active != ”) {
    currentindex = active;
    }

    $(“#navigation”).accordion({
    collapsible: false,
    autoHeight: false,
    change: function (event, ui) {
    var i = $(“#navigation”).accordion(“option”, “active”);
    $(‘#’).val(i);
    }
    });

    $(“#navigation”).accordion(“activate”, parseInt(currentindex));
    });

    Inventory Manager

    Default

    Administration

  4. admin says:

    Where this value is coming from? I cannot see hidden filed name in your code
    var active = $(‘#’).val();

    Have a look to this line, following line is being used in Webforms.
    var active = $(‘#< %= hfaccordion.ClientID %>’).val();

  5. dimuthu says:

    great work, saved my time

Leave a Reply