Showing and hiding immediate children of li's using jQuery

andrewaiello
andrewaiello used Ask the Experts™
on
Hello, I'm trying to hide and show all immediate children (ul's) of my nested lists.  It's going to be a navigation on the side of a page.  

What I currently have seems to be exactly what I want but the child li's seem to be masked by their super parent li's.  So when I click on one that is nested it closes everything except the root li's.  

I've seen similar code for accordions but when you click on a different item it closes any others.  I want them to be able to keep as many as they would like open.

Here is my current code for my list

<ul class="nav">
    	<li>Book 1
        	<ul>
            	<li>Section 1
                	<ul>
                        <li>Chapter 1
                        </li>
                        <li>Chapter 2
                        </li>
                        <li>Chapter 3
                        </li>
                    </ul>
                </li>
                <li>Section 2
   	                	<ul>
                            <li>Chapter 1
                            </li>
                            <li>Chapter 2
                            </li>
                            <li>Chapter 3
                            </li>
                        </ul>
                </li>
                <li>Section 3
                        <ul>
                            <li>Chapter 1
                            </li>
                            <li>Chapter 2
                            </li>
                            <li>Chapter 3
                            </li>
                        </ul>
                </li>
            </ul>
        </li>
        <li>Book 2
        	<ul>
            	<li>Section 1
                	<ul>
                        <li>Chapter 1
                        </li>
                        <li>Chapter 2
                        </li>
                        <li>Chapter 3
                        </li>
                    </ul>
                </li>
                <li>Section 2
   	                	<ul>
                            <li>Chapter 1
                            </li>
                            <li>Chapter 2
                            </li>
                            <li>Chapter 3
                            </li>
                        </ul>
                </li>
                <li>Section 3
                        <ul>
                            <li>Chapter 1
                            </li>
                            <li>Chapter 2
                            </li>
                            <li>Chapter 3
                            </li>
                        </ul>
                </li>
            </ul>
        </li>
        <li>Book 3
        	<ul>
            	<li>Section 1
                	<ul>
                        <li>Chapter 1
                        </li>
                        <li>Chapter 2
                        </li>
                        <li>Chapter 3
                        </li>
                    </ul>
                </li>
                <li>Section 2
   	                	<ul>
                            <li>Chapter 1
                            </li>
                            <li>Chapter 2
                            </li>
                            <li>Chapter 3
                            </li>
                        </ul>
                </li>
                <li>Section 3
                        <ul>
                            <li>Chapter 1
                            </li>
                            <li>Chapter 2
                            </li>
                            <li>Chapter 3
                            </li>
                        </ul>
                </li>
            </ul>
        </li>
    </ul>

Open in new window


Here is my jQuery code

jQuery(document).ready(function() {
	$('.nav').find('li > ul').hide().end()
	
	$('.nav').find('li').click(function() {
     $(this).children().slideToggle();
   });
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
look fine here : http://jsfiddle.net/S7TGL/
without the CSS...

Author

Commented:
Well the first level works fine, but when you click on one of the sections it opens up the 3rd level but also closes the first level.  I can tell this because the next time I open the first level it shows all 3 levels (Books, Sections, and Chapters).
Multitechnician
Top Expert 2014
Commented:
Try this one : http://jsfiddle.net/BqpUY/
jQuery(document).ready(function() {
    $('.nav').find('ul').hide().end();
    $('.nav').find('li').click(function(e) {
        e.stopPropagation();
        $(this).children("ul").slideToggle();
    });
});

Open in new window

Author

Commented:
That worked perfectly.  I knew it was somehow inheriting from above.  I wasn't able to find the .stopPropagation() command.  Thank you very much.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial