Display / hide list when clicking on a link

Question

There is such code:

<!-- Main navigation --> <ul class="categories"> <li class="category-1"> <a href="">Category Title 1</a> </li> <li class="category-2"> <a href="">Category Title 2</a> </li> <li class="category-3"> <a href="">Category Title 3</a> </li> <li class="category-4"> <a href="">Category Title 4</a> </li> <li class="category-5"> <a href="">Category Title 5</a> </li> <li class="category-6"> <a href="">Category Title 6</a> </li> </ul> <!-- Lists --> <ul class="categories-1-level"> <li class="category-1"> <a href="">Category List 1</a> </li> <li class="category-2"> <a href="">Category List 2</a> </li> <li class="category-3"> <a href="">Category List 3</a> </li> <li class="category-4"> <a href="">Category List 4</a> </li> <li class="category-5"> <a href="">Category List 5</a> </li> <li class="category-6"> <a href="">Category List 6</a> </li> </ul>

by default, all the "Category List" lists are hidden;
when you click on "Category Title 1", opened "Category List 1";
when pressed again disappeared;

when you click on "Category Title 2", opened "Category List 2", and "Category List 1" disappeared

 jQuery(document).ready(function($){ $('categories-1-level > li').hide(); // скрываем все li в списке 1го уровня $('ul.categories li a').click(function() { return false; // Убираем переход по нажатии на ссылку }); });

What next can I do not understand

Accepted Answer · 2016-10-27T16:44:34

 $(document).ready(function(){ $(".categories-1-level li").hide(); $(".categories a").click(function(event){ event.preventDefault(); var thisLi = $(".categories-1-level").find("li." + $(this).parent().attr("class")); $(".categories-1-level li").not(thisLi).hide(); thisLi.toggle(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Main navigation --> <ul class="categories"> <li class="category-1"> <a href="">Category Title 1</a> </li> <li class="category-2"> <a href="">Category Title 2</a> </li> <li class="category-3"> <a href="">Category Title 3</a> </li> <li class="category-4"> <a href="">Category Title 4</a> </li> <li class="category-5"> <a href="">Category Title 5</a> </li> <li class="category-6"> <a href="">Category Title 6</a> </li> </ul> <!-- Lists --> <ul class="categories-1-level"> <li class="category-1"> <a href="">Category List 1</a> </li> <li class="category-2"> <a href="">Category List 2</a> </li> <li class="category-3"> <a href="">Category List 3</a> </li> <li class="category-4"> <a href="">Category List 4</a> </li> <li class="category-5"> <a href="">Category List 5</a> </li> <li class="category-6"> <a href="">Category List 6</a> </li> </ul>

Thank you, Igor, everything seems to work here, only after you click on another link, the previous list is not hidden.

Display / hide list when clicking on a link

1 answer 1

More articles: