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?

emd · Accepted Answer · 2015-08-17 23:45:26Z

2

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();
    });
});

answered Aug 17, 2015 at 23:45

emd

1,22310 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Schultheiss · Accepted Answer · 2015-08-18 02:54:13Z

1

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/

answered Aug 18, 2015 at 2:54

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

1 Comment

RightLeftRight12 Over a year ago

Yes exactly! Very nice

DarthDerrr · Accepted Answer · 2015-08-18 02:32:19Z

0

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}

edited Aug 18, 2015 at 2:32

answered Aug 18, 2015 at 2:18

DarthDerrr

4913 silver badges9 bronze badges

2 Comments

RightLeftRight12 Over a year ago

Can you elbaorate what you mean in the CSS part?

DarthDerrr Over a year ago

Added to the answer. Its very basic but probably a starting point.

Collectives™ on Stack Overflow

Jquery to create hierarchy with unordered list

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related