Question

We have created a jQuery accordion with three levels.

Everything goes fine except, when you open a level 2 item, all other level 2 items are closing. What do we have to change to only let affect this on the level 1 items?

Our HTML markup is as follow:

<ul>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

And our jQuery markup is as follow:

$this.find("li a").click(function() {
    if($(this).parent().find("ul").size() != 0){
        if(opts.accordion){
            //Do nothing when the list is open
            if(!$(this).parent().find("ul").is(':visible')){
                parents = $(this).parent().parents("ul");
                visible = $this.find("ul:visible");
                visible.each(function(visibleIndex){
                    var close = true;
                    parents.each(function(parentIndex){
                        if(parents[parentIndex] == visible[visibleIndex]){
                            close = false;
                            return false;
                        }
                    });
                    if(close){
                        if($(this).parent().find("ul") != visible[visibleIndex]){
                            $(visible[visibleIndex]).slideUp(opts.speed, function(){
                                $(this).parent("li").find("span:first").html(opts.closedSign);
                            });                                     
                        }
                    }
                });
            }
        }

    $(this).parent().children("ul").slideDown(opts.speed, function(){
        $(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
    });

    }
});

Answer 1

Fixed by changing:

parents = $(this).parent().parents("ul");

To:

parents = $(this).parent().parents().children("ul");