Jquery to create hierarchy with unordered list

Question

I have an unordered list that when clicked shows their children. I am trying to add the feature where when there are children shown from a parent and a sibling of that parent is clicked, the other children close while the new ones open. Here is what I have so far:

<ul class="list">
    <li> <a>Categories</a>
        <ul>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

This is my jquery:

$(document).ready(function(){
    $('.list > li a').click(function(){
        $(this).parent().children('ul').toggle();
    });

Here is a jfiddle: https://jsfiddle.net/hmsvox5a/

Now if you click parent, the children show up. If you click another parent, its children appear as well. This leaves two sets of children open. I am trying to get the first set of children to close when I open the second. When I try to hide the siblings children, It messes up the whole jquery. Any ideas?

Answer 1

I'm not going to lie and tell you that this will scale or that it isn't awful, but this was the first thing I thought of off the top of my head. There are many ways to solve this.

$(document).ready(function(){
    $('.list > li a').click(function(){
        $('.open').parent().children('ul').toggle();
        $('.open').removeClass('open');
        $(this).addClass('open').parent().children('ul').toggle();
    });
});

Answer 2

I believe what you want is this perhaps?

$(document).ready(function(){
    $('.list > li a').click(function(){
        $(this).parent('li').siblings('li').children('ul').hide();
        $(this).siblings('ul').toggle().children().show();
    });
});

test it out here: http://jsfiddle.net/vgwrqr6c/

Answer 3

I prefer to use CSS on the children to show items when its parent is shown. Then this efficient script works.

It keeps a reference to the last selected parent so it doesn't have to search the whole dom.

$(document).ready(function(){
  var $selected;
  $('.list > li a').click(function(){ 
    if($selected){
      $selected.remove class("open");
    }
    $selected = $(this).parent();
    $selected.add class("open");
   });
});

CSS would be something like this.

li ul{ display:none;}
li.open ul{ display: block}