$(document).ready(function() { $('.link').click(function(event) { $('.list__sublist').slideToggle(); event.preventDefault(); }); }); 
 .list__sublist { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li class="list__item"> <a class="link" href="">List #1</a> <ul class="list__sublist"> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> </ul> </li> <li class="list__item"> <a class="link" href="">List #2</a> <ul class="list__sublist"> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> </ul> </li> </ul>

How to make, that at a clique on .link corresponding menu, but not all at .link opened?

    2 answers 2

    Take the next item from the one that was clicked

     $(document).ready(function() { $('.link').click(function(event) { $(this).next(".list__sublist").slideToggle(); event.preventDefault(); }); }); 
     .list__sublist { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li class="list__item"> <a class="link" href="">List #1</a> <ul class="list__sublist"> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> </ul> </li> <li class="list__item"> <a class="link" href="">List #2</a> <ul class="list__sublist"> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> </ul> </li> </ul>

    or do an item search if the markup can change:

     $(document).ready(function() { $('.link').click(function(event) { $(this.parentNode).find(".list__sublist").slideToggle(); event.preventDefault(); }); }); 
     .list__sublist { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li class="list__item"> <a class="link" href="">List #1</a> <ul class="list__sublist"> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> <li class="list__item"><a href="">Item list #1</a> </li> </ul> </li> <li class="list__item"> <a class="link" href="">List #2</a> <ul class="list__sublist"> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> <li class="list__item"><a href="">Item list #2</a> </li> </ul> </li> </ul> 

       $(this).children('.list__sublist').slideToggle();