Question

Tl;dr: scroll to bottom for simpler explanation.

I would like to think that I’ve got a slightly unique problem. First and foremost.. I have already looked over the internet/google, and the site included, as well as the suggestions when asking this question.

Back onto the subject at hand, I am generating a nested series of accordions where the amount of nesting is dynamically generated.. that is to say, there is no set limit on how many parents a bottom-level item can have, therefore it is not an option to go ‘.acord1,.acord2,.acord3’ and etc.

To the problem.. Some of the headers in the accordion are bottom-level items, they have no children, no accordion is attached.

The below example html does not contain the above said items, as it reproduces the problem faced, which is the fact that when adding the header: option(which I use to exclude the previously mentioned items), it triggers the top-level accordion, closing it when one of the children is clicked.

The below is a test case I’ve managed to reproduce with minimal code:

<div class="acord">
    <h3>test1</h3>
    <div class="acord">
        <h3>test2</h3>
        <div>test2cont</div>
    </div>
    <h3 class="item">test3</h3>
</div>

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

In case the above was tl;dr, specifying the header option with nested accordions does not work, as the parent of the child accordions(which are clicked), then closes.

Js Fiddle

Is there a solution?

Answer 1

The below is the work-around I managed. It’s ugly, but with a few other things it gets the job done. If anyone has any better ideas than removing the icons and padding and click function of a jquery accordion header, please answer this question. Until then:

$(".acord").accordion({
    heightStyle: "content",
    active: false,
    collapsible: true,
    changestart: function (event, ui) {
        if ($(event.currentTarget).hasClass("item")) {
            event.preventDefault();
            $(event.currentTarget).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    }
});

Edit:

Thanks to the people over at the jQuery bug tracker, this has been solved with a much better solution:

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