JQuery accordion doesn't work without h3 tags

Question

Hey guys,

I am trying to make an accordion with JQuery and am running into some trouble. The JQuery website shows to create your accordion content like this.

<div id="accordion">
    <a href="#">First header</a>
    <div>First content</div>
    <a href="#">Second header</a>
    <div>Second content</div>
</div>

When I do this the accordion doesn't work right and something is wrong with the formatting. If I put h3 tags around the header anchors like so

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

It works. Does anyone know why this happens? It happens in Firefox 3.5 and IE 8. I also just downloaded the JQuery files today.

-Thanks

Answer 1

You must set the appropiate header option.

In your case you want to use the anchors as the headers:

$('#accordion').accordion({
  header: "a"
});

Answer 2

You must initialize the accordion with the header option specified:

$('#accordion').accordion({ 
  header: 'a' 
});

You also might want to check out the jQuery Accordion API for more options.