jQueryUI nested accordion only working on first sub-list

Question

I'm working on a site that has a dynamically generated FAQ and I'm trying to get nested accordions working. The problem is, only the first collection of questions take on the ui-accordion class.

Here's my code: http://jsfiddle.net/SmFdt/

(I just copied the source of the page and stripped out most of the text)

What am I doing wrong?

Answer 1

You've got the same id assigned to multiple divs. Try the following instead:

HTML

<h1>Frequently Asked Questions</h1>

<div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>
    <div class="accordian">
        <h3><a href="#">A</a></h3>
        <div>AAAAAAAAAA</div>
        <h3><a href="#">B</a></h3>
        <div>BBBBBBBBBB</div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div class="accordian">
        <h3><a href="#">A2</a></h3>
        <div>AAAAAAAAAA2</div>
        <h3><a href="#">B2</a></h3>
        <div>BBBBBBBBBB2</div>
    </div>
</div>

JavaScript

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});

Link to example: http://jsfiddle.net/SmFdt/1/