Accordion - Tracking Selected Item Header
HTML
<div id="accordion">
<h3 class="ui-accordion-header"><a id="link1" href="#">First Header</a></h3>
<div id="div1">First Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second Content</div>
<h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
<div id="div2">Second ContentSecond ContentSecond ContentSecond ContentSecond ContentSecond ContentSecond ContentSecond ContentSecond...
JavaScript
$("#accordion").accordion({
collapsible: true,
active:false,
navigation:true,
autoHeight:false,
change:function(event, ui){
var currentHeaderID = ui.newHeader.find("a").attr("id");
window.alert(currentHeaderID);
}
});