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());
}
});
});