Retain Jquery accordion current index across the post back

Retain Jquery accordion current index across the 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”>
<a href=”#”>Test 1</a></h3>
Test 1
<asp:Button ID=”Button2″ runat=”server” Text=”Post” />
<a href=”#”>Test 2</a></h3>
Test 2
<asp:DropDownList ID=”DropDownList2″ runat=”server” AutoPostBack=”true”>

JQuery Code

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

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

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



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

function pageLoad(sender, args) {

if (args.get_isPartialLoad()) {



Note: Please use latest jQuery version


5 Responses to “Retain Jquery accordion current index across the 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;

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

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

    Inventory Manager



  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