JQuery UI Nested Accordion - clicking on child accordion closes the parent

Question

I'm implementing a nested accordion, but when I click on a child component within the parent accordion, it closes the parent. I'd like it to remain open when a child is clicked.

HTML:

<div id="accordion">
    <h3>Home</h3>
    <div id="accordion">
        <h3>Sub-Div1</h3>
        <div>
            <p>This is a sub-div</p>
        </div>
    </div>
</div>

Script:

<script>
    $("#accordion").accordion({
        header: "> h3:not(.item)",
        heightStyle: "content",
        active: false,
        collapsible: true
    });
</script>

Answer 1

The problem is that you have the same id for both accordions (which is invalid html to start with) which makes the plugin always match the first one.

If you use classes it works fine

<div class="accordion">
    <h3>Home</h3>
    <div class="accordion">
        <h3>Sub-Div1</h3>
        <div>
            <p>This is a sub-div</p>
        </div>
    </div>
</div>

and

$(".accordion").accordion({
    header: "> h3:not(.item)",
    heightStyle: "content",
    active: false,
    collapsible: true
});

Demo at http://jsfiddle.net/gaby/xmq8xhvp/