How to make a sidebar menu like this site?

That three subitems of the menu were always visible, and when clicking on the big title of the menu it was shown completely.

    2 answers 2

    Through css, pre-hide all elements starting from the fifth .item:nth-child(+n+5)
    Hide and expand all items, starting from the fourth $('.item').slice(4)

    Apparently in css the order starts from 1 , and in js from 0

     $('.item').eq(0).click(function() { $(this).html() == '↓ список' ? $(this).html('↑ список') : $(this).html('↓ список'); $('.item').slice(4).slideToggle(); }); 
     .item { list-style: none; background: #E0E4E8; padding: 2px 4px 2px 4px; cursor: pointer; } .item:hover { background: #F4F8FB; } .list { display: list-item; } #list { cursor: pointer; } .item:nth-child(+n+5) { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <ul style='width: 256px'> <li class='item'>↓ список</li> <li class='item'>item 1</li> <li class='item'>item 2</li> <li class='item'>item 3</li> <li class='item'>item 4</li> <li class='item'>item 5</li> <li class='item'>item 6</li> </ul>

    • Thanks for the answer, but is it possible to implement it in one class, so that you don’t need to give the item hide class elements that need to be animated, or somehow assign a class to it via javascript, but the main thing is that the elements in html have the same class name, thanks In Courage
    • @InCourage, updated - Mr. Black

     $(function(){ $(".title").click(function () { $(".content").toggle("slow"); }); }); 
     .content { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="title">Title</div> <div class="mini-content"> <p>Пункт - 1</p> <p>Пункт - 2</p> <p>Пункт - 3</p> <div class="content"> <p>Пункт - 4</p> <p>Пункт - 5</p> <p>Пункт - 6</p> <p>Пункт - 7</p> <p>Пункт - 8</p> <p>Пункт - 9</p> </div> </div>

    • Thanks for the answer, but is it possible to implement it in one class, so that you do not need to give another class to elements that need to be animated, or somehow assign a class to it via javascript, but the main thing is that the elements in html have the same class name, thanks - In Courage