Sidebar меню как сделать?

#javascript

Как сделать sidebar меню так, как на этом сайте?

Чтобы три подпункта меню всегда были видны, а при нажатии на большой заголовок меню
показывалось полностью.
    

Ответы

Ответ 1

Через css предварительно скрываем все элементы, начиная с пятого .item:nth-child(+n+5)
Скрываем и раскрываем все элементы, начиная c четвёртого.

Видимо в css порядок начинается с 1, а в js с 0



var list = document.querySelector('ul');

list.firstElementChild.onclick = function(e) {

  let expand = this.innerHTML == '↓ список' ? true : false;
  
  this.innerHTML = expand ? '↑ список' : '↓ список';
  expand ? list.classList.add('expand') : list.classList.remove('expand');
  
  e.preventDefault();
}
.item {
  list-style: none;
  background: #E0E4E8;
  padding: 2px 4px 2px 4px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.item:hover { background: #F4F8FB; }
.list { display: list-item; }
#list { cursor: pointer; }

.item:nth-child(+n+5) {
  height: 0px;
  padding-top: 0px;
  transition: 0.25s;
}

ul.expand li:nth-child(+n+5) {
  height: 18px;
  padding-top: 4px;
  transition: 0.25s;
}

  
↓ список
  
item 1
  
item 2
  
item 3
  
item 4
  
item 5
  
item 6



Ответ 2

$(function(){
  $(".title").click(function () {
      $(".content").toggle("slow");
    });
  });
.content {
  display: none;
  }

Title

  
Пункт - 1
  
Пункт - 2
  
Пункт - 3



  
Пункт - 4
  
Пункт - 5
  
Пункт - 6
  
Пункт - 7
  
Пункт - 8
  
Пункт - 9