JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<ul class="menu__list">
								<li class="menu__item"><a href="#" class="menu__link">Product</a><button type="button"
										class="header__button"></button>
									<ul class="menu__sub-list">
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №1</a></li>
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №2</a></li>
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №3</a></li>
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №4</a></li>
									</ul>
								</li>

CSS

.header__button{
  width: 50px;
  height:50px;
  
  
}
.menu__item.active .menu__sub-list{
  height: 0px;
  overflow:hidden;
  transform: translate(0px, 50px);

  
}
.menu__item .menu__sub-list{
  transition: transform 1s ease;
  height: 200px;
}

JavaScript

const menuBtn = document.querySelector('.header__button');

 menuBtn.addEventListener('click', function (e) {
 let targetMenuItem = e.target.closest('.menu__item');
 
 targetMenuItem.classList.toggle("active");
 });