[解決済み] JQuery UI Nested Accordion - 子アコーディオンをクリックすると親が閉じます。

質問

ネストしたアコーディオンを実装していますが、親アコーディオン内の子コンポーネントをクリックすると、親が閉じてしまいます。子コンポーネントがクリックされても開いたままにしたいのですが。

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

解決方法は？

問題は、両方のアコーディオンで同じ ID を使用していることです ( これはそもそも無効なhtmlです ) そのため、プラグインは常に最初のものにマッチします。

クラスを使用する場合は、問題なく動作します

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

そして

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

デモの様子 http://jsfiddle.net/gaby/xmq8xhvp/