I'm implementing a nested accordion, but when I click on a child ponent 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>

I'm implementing a nested accordion, but when I click on a child ponent 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>

• javascript
• jquery
• html
• css
• jquery-ui

• Forgot to add, there's a final </div> tag at the end of the HTML. StackOverflow won't let me edit my question for some reason. – alex494 Commented Dec 18, 2014 at 19:21
• possible duplicate of jQuery - Stop accordion menu from closing when menu item clicked – TylerH Commented Dec 18, 2014 at 19:23

3 Answers 3

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/gaby/xmq8xhvp/

just used your code to fix the same problem and it worked straight away, thanks.

Not sure why it works though -

header: "> h3:not(.item)",

I read the above as: For the header, get the direct child h3s (after class="accordion), but not (.item).

So, .item must refer to the nested accordion class's direct child? Is .item a reserved jquery word? I've googled it but haven't e up with anything.

As html4 and html5 specification says: You should not have more than one element has the same id attribute.

So, change your parent or child element id attribute and i promise you will be fine.