JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div class="side-nav">
<ul id="menu">
	<li>
  <button class="menu-btn" >ORDERS<i class="fas fa-shopping-cart icon-right"></i></button>
		<ul id="dropdown-menu">
			<li><button class="dropdown-btn" onclick="view_orders()">View orders</button></li>
			<li><button class="dropdown-btn" title="Manage-orders">Manage orders</button></li>
			<li><button class="dropdown-btn" title="Enter-new-order">Enter new order</button></li>
		</ul>
	</li>
  	<li>
  <button class="menu-btn" >ORDERS 2<i class="fas fa-shopping-cart icon-right"></i></button>
		<ul id="dropdown-menu">
			<li><button class="dropdown-btn" onclick="view_orders()">View orders</button></li>
			<li><button class="dropdown-btn" title="Manage-orders">Manage orders</a></li>
			<li><button class="dropdown-btn" title="Enter-new-order">Enter new order</a></li>
		</ul>
	</li>

CSS

#dropdown-menu {
display: none;
margin: 0;
border-style: none;
list-style: none;
width: 181px;
text-align: left;
border-bottom: 1px solid #2f3437;
padding: 0;
}

#dropdown-menu button {
  background: #7689a3;
  border-top: 1px solid #94a3b8;
  border-bottom: 1px solid #52637a;
  border-right: 1px solid #94a3b8;
  color: #f3f2f2;
  display: block;
  margin: 0;
  padding: 8px 12px 8px 28px;
}

.dropdown-btn {
  border-style: none;
  color: #e6e5e5;
  display: block;
  margin: 0;
  width: 181px;
  text-align: left;
  font: 88% "Arial", Arial, Helvetica, sans-serif;
}

JavaScript

var dropdown = document.getElementsByClassName("menu-btn");

var myFunction = function() {

		var myitem = document.querySelector('.menu-btn');
    
    console.log(myitem);
    
    var dropdownContent = this.nextElementSibling;
    
    dropdownContent.style.display = "block";
    myitem.style.display = "none";
     
    

    
};


Array.from(dropdown).forEach(function(element) {
      element.addEventListener('click', myFunction);
});