menu toggle

by Stalk

HTML

<ul class="menu collappsed">
  <li>Демонтаж старого унитаза - 1</li>
  <li>Выравнивание пола - 1</li>
  <li>Монтаж новой манжеты на трубу канализации - 1</li>
  <li>Установка нового унитаза - 1</li>
  <li>Подключение к стояку при помощи гибкой подводки - 1</li>
  <li>Подключение к стояку при помощи гибкой подводки - 1</li>
  <li>Подключение к стояку при помощи гибкой подводки - 1</li>
</ul>
<button>push me</button>

CSS

body {
  background-color: white;
}
.menu {
  list-style-type: none;
  position: relative;
  height: 108px;
  transition: height .5s ease-out;
  overflow: hidden;
}
.menu.collappsed {
  height: 54px;
}
.menu.collappsed::before {
    background: transparent;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    content: "";
    display: block;
    left: 0;
    position: absolute;
    bottom: 0;
    height: 18px;
    width: 100%;
}
.menu li {
  height: 18px;
}

JavaScript

document.querySelector('button').addEventListener('click', function(){
	document.querySelector('.menu').classList.toggle('collappsed');
})