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 bee closed. I'm not sure how I can achieve this. Are you able to help?

Thanks

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 bee closed. I'm not sure how I can achieve this. Are you able to help?

Thanks

• javascript
• jquery
• jquery-ui
• jquery-ui-accordion

• #2 is the default behavior when you use collapisble: true – prodigitalson Commented Jul 1, 2011 at 8:21
• When header1 is open and you click header2, then header1 is closed and header2 is opened. However what I would like is when header1 is opened and you clicked on header1 again, then header1 to be closed. That does not happen at the moment. – Sivakanesh Commented Jul 1, 2011 at 8:26
• 1 yes if you have collapisble set it should work that way: jqueryui./demos/accordion/#collapsible Its not working now because youve mispelled the option its collapsible NOT collapsable – prodigitalson Commented Jul 1, 2011 at 8:41
• Sivakanesh, do you know that ID's are case sensitive and that they cannot start with a 'number' ? use rather something like id="link1" id="link2" ...etc. – Roko C. Buljan Commented Jul 1, 2011 at 9:02
• Updated the questions and put up a JSFiddle link. Tx – Sivakanesh Commented Jul 1, 2011 at 9:08

1 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.