ASP.NET C# JQueryUI How to save index of accordion in a dynamically created user control?

Question

ASP.NET C# JQueryUI How to save index of accordion in a dynamically created user control?

I have a JQueryUI accordion inside a user control , which is dynamically created n times (based on a chosen number inside a ComboBox) from the main aspx page. I have been using the following javascript code to save the index of accordions that occur once in the main aspx page, I have this once per accordion Control:

var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>");
var activeAccordion1 = 0;
if (activeAccordion1Item) {
    activeAccordion1 = parseInt(activeAccordion1Item.value);
}
$("#accordion1").accordion({
    collapsible: true,
    heightStyle: "content",
    active: activeAccordion1,
    activate: function (event, ui) {
        var i = $("#accordion1").accordion("option", "active");
        var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>");
        activeAccordion1Item.value = i;
    }
});

And in aspx file:

<asp:HiddenField ID="HFaccordion1" runat="server" Value="0" />

I used this same approach for the one inside the user_control that can happen many times, and it also works, BUT the saved index is always the one from the first accordion, and that is shared among the rest. So, if I have index 2 in accordion1, and index 1 in accordion2, and a control causes postback, after the postback, both accordion1 and accordion2 appear with index 2 active.

How can I modify the above code to work for the dynamically created accordions independently of each other?

Answer 1

You should change $("#accordion1").accordion to $(".acc").accordion . .acc is class of accordions for this example. You used $("#accordion1") that this worked with active accordion1 .

Edit

You need save active accordions in a array ( accordionsActivate ) when click on each accordion and for getting this array, store array in hidden field ( HFaccordions ) like this:

<script>
    var accordionsActivate = [];
    $(document).ready(function () {

        var $accordions = $(".acc").accordion({
            collapsible: true
                 , active: false
                 , icons: false

        }).on('click', function () {
            if ($.inArray($(this).attr('id'), accordionsActivate) < 0) {
                accordionsActivate.push($(this).attr('id'));
                $('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join());
            }
            else {
                accordionsActivate.splice($.inArray($(this).attr('id'), accordionsActivate), 1);
                $('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join());
            }

        });

        activeAccodions(); // Active accodions after postback
    });

    function activeAccodions() {
        if ($('#<%=this.HFaccordions.ClientID%>').val() === "")
            return;
        activeAccardions = $('#<%=this.HFaccordions.ClientID%>').val().split(',');
        for (var i = 0; i < activeAccardions.length; i++) {
            accordionsActivate.push(activeAccardions[i]);
        }
        for (var i = 0; i < accordionsActivate.length; i++) {
            $('#' + accordionsActivate[i]).accordion("option", "active", 0);
        }
    }

</script>

Online demo (fiddle)