jQuery toggle next ul li based on the icon click

Question

Trying to do accordion style display.

Better reference to the kind of display I want: https://imgur.com/tr9cd52

You will notice to the right of Lily there is an arrow, clicking on it should show the items under.

My challenge is in traversing through the DOM correctly to locate the next ul to show/hide when button is clicked. How I do that?

As I'm sure you can tell what I'm trying to do is show the nested style but in a box to create an accordion effect.

Working fiddle https://jsfiddle.net/zigzag/aLb5d2uL/10/

 $('.menu-toggle').click(function(e) { e.preventDefault(); // prevent <a> to redirect to the top of the page $(this).nextall('ul').toggle(); }); 

 .chartArea { padding: 20px 20px 0 0; } ul { list-style-type: none; } .glyphicon { color: white; } .tile { margin: 10px; padding: 20px; background-color: gray; font-family: segoe UI; color: white; min-height: 150px; } .empDetails { font-size: 14px; color: white; } .chartArea ul li { display: none; } .chartArea>ul>li { display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="container-fluid chartArea"> <ul> <li> <div class="tile">Adam</div> </li> <li> <div class="tile"> <div class="col-sm-2 img_tile"> <img src="http://via.placeholder.com/50x50"> </div> <div class="col-sm-8 empDetails"> <h4> Lily </h4> <p> Director </p> <p> Ensure quality and timely delivery through resource and time management. </p> </div> <div class="col-sm-2 toggle_button"> <a class="menu-toggle" href="#"> <span class="glyphicon glyphicon-menu-down"></span> </a> </div> </div> <ul> <li> <div class="tile"> <div class="col-sm-2 img_tile"> <img src="http://via.placeholder.com/50x50"> </div> <div class="col-sm-8 empDetails"> <h4> Sen </h4> <p> Manager </p> <p> Ensure quality and timely delivery through resource and time management. </p> </div> </div> </li> <li> <div class="tile">Another Sen</div> <ul> <li> <div class="tile">Sen jr</div> </li> </ul> </li> </ul> </li> <li class="tile">Justin</li> </ul> </div> 

Most of the code is posted above. I have some nested UL Li tags but can't find a way to create a logic that collapses or shows the list of objects around the click each time.

Answer 1

A number of things are going on here.

1. jQuery is not included in your fiddle. Inside the Javascript panel, click the "gears" icon and select a jQuery version.
2. As was already pointed out, use $(this) not $('this') because if you use quotes, then you're passing jQuery a String of "this" instead of an actual DOM element.
3. In your CSS, you're setting all <ul> to be display none. You need to change that from .chartArea ul { display: none; } .chartArea ul { display: none; } to .chartArea ul li ul {display: none; } .chartArea ul li ul {display: none; } so that only the <ul> inside the <li> is hidden.

I would actually recommend you change your HMTL markup a bit to make the DOM navigation easier, but to do this with your markup, you need can do the following things:

1. Identify the Parent Element that is common to both the <a> and the <ul> you are trying to show. In this case, it's the <li>, so we'll go UP the tree to that.
2. From here, we'll look down the tree for the <ul> that is hidden that we want to show. Since there's only one, it's easy to find it. Go down the tree to this
3. Now just use a jQuery method to show this element.

Here's the Fiddle. Note that I changed your jQuery and the one CSS rule. https://jsfiddle.net/f4m22hmy/1/