Get reference to a JQuery UI Accordion Header

Question

I have a JQuery Accordion as below;

<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>
</div>

The Accordion is generated by this:

$("#accordion").accordion({
  collapsible:true,
  active:false,
  navigation:true,
  autoHeight:false,
  change:function(event, ui){
    var index = $(this).find("h3").index(ui.newHeader[0]);
    var header = $(this).find("h3")[index].find("a"); //<--- problem line
    var currentHeaderID = (header.attr("id")); //<--id that I need
  }
});

JSFiddle Link

The accordion is loading up fine. I'm trying to achieve two things.

1- Get the ID of the href element inside the tag of the header that was just opened (i.e. ids link1 and link2). The code above inside the change event is giving me the index of the header. But I'm struggling to get the next line (var header = ....) working. would you be able to

2- RESOLVED When a user clicks on an already opened header, that section is closed, so effectively all sections become closed. I'm not sure how I can achieve this. Are you able to help?

Thanks

Answer 1

When the accordion changes, a jQuery object wrapping the active header's <h3> element is passed in ui.newHeader, so you only have to use find():

var currentHeaderID = ui.newHeader.find("a").attr("id");

Updated fiddle here.