JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div class="main">
  <ul>
  <li>In</li>
  <li>Prime</li>
  <li>We</li>
  <li>Trust</li>
</ul>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, laborum, explicabo! Maiores nam commodi sequi sit, ducimus id nihil nobis unde sed labore dolore sunt enim eligendi natus cupiditate dignissimos!
</p>
<button>
  toggle
</button>
</div>

CSS

button {
  position: absolute;
  cursor: pointer;
  top: 7px;
  right: 10px;
  font-weight: bold;
}

.main {
  padding: 0;
  margin: 0;
  background: orange;
}

ul {
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: all 0.3s;
}
li{ 
  text-align: center;
}

JavaScript

const list = document.querySelector("ul");
const btn = document.querySelector('button');
let isOpen = false;
const menuMaxHeight = parseFloat(list.getBoundingClientRect().height + 2); // 2px up;

list.style.maxHeight = '0';


btn.addEventListener('click', () => {
  if(!isOpen) {
     list.style.opacity = 1;
     list.style.maxHeight = `${menuMaxHeight}px`;
  }else {
  list.style.opacity = 0;
  list.style.maxHeight = '0';
  }
  isOpen = !isOpen;
})