I was looking for a kind of onselected trigger for the JQueryUI accordion (v 1.8.11). The proper way to do this is to use the “change” event of the accordion :

 

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({
            change: function (event, ui) {
                alert("changed!");
            }
        });
    });

 

Now, you might want to get the selected pane index. This is quite easy too :

 

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({
            active: 0,
            change: function (event, ui) {
                var activeIndex = $("#accordion").accordion("option", "active");
                alert(activeIndex);
            }
        });
    });

 

Lastly, you might have a hidden field of interest inside the selected pane that you want to access. Perhaps the accordion is constructed dynamically and each pane has an hidden field holding a value that you need.

We will use a jQuery selector to get it. I chose to rely on the class attribute to get all hidden ids and then to make use of the activeIndex to retrieve the right one.

 

<input class="HiddenId" type="hidden" value="1234"/>

 

Now, using a proper jQuery selector we are able to display that value when a new pane of the accordion is selected. The class HiddenId is what permits us to discriminate against different types of hidden fields, but you may chose to use a different attribute depending on the way the accordion contents are generated. Attributes Name or Id might work.

 

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({
            active: 0,
            change: function (event, ui) {
                var activeIndex = $("#accordion").accordion("option", "active");
                var hidId = $("#accordion input[type=hidden][class=HiddenId]")[activeIndex];
                alert($(hidId).val());
            }
        });
    });