Question

I am using a hidden field to store the active index for the accordion:

var activeIndex = parseInt($('#ContentPlaceHolder1_hidAccordionIndex').val());
$("#accordion").accordion({
    changestart: function () {
        var value = $(this).scrollTop();
        window.scrollTo(0, value);
    },
    autoHeight: false,
    event: "mousedown",
    active: activeIndex,
    collapsible: true,
    disabled: false,
    change: function (event, ui) {
        var index = $(this).children('h4').index(ui.newHeader);
        $('#ContentPlaceHolder1_hidAccordionIndex').val(index);
    }
});

Currently, the hidden field value is set in the codebehind. Therefore, if the user clicks on the accordion header, I would like to update the value of the hidden field according to the header that has been clicked.

Any ideas on how to do this? Thanks in advance.

Answer 1

I have made an exact same example as yours in this fiddle and it works like a charm.

The only possible reason for you to not find the index of the current header is that you might have <h3> headers in your markup and your selecting <h4> in your change handler.

Change one or the other and it should normally work.