JSFiddle - React, Tailwind, and code Playground

by rhelminen

HTML

<div class="menu_wrapper">
    <ul class="menu_company">
        <li class="main_item company">Our Company</li>
        <li class="menu_item hide_menu">About US</li>  
        <li class="menu_item hide_menu">Our offices</li>
        <li class="menu_item hide_menu">Careers</li>
    </ul>
    <ul class="products">
        <li class="main_item products">Our Products</li>
        <li class="menu_item hide_menu">Product A</li>  
        <li class="menu_item hide_menu">Product B</li>
        <li class="menu_item hide_menu">Communication</li>
    </ul>
</div>


<div class="menu_wrapper">
    <ul class="menu_company hide_menu">
        <li class="main_item company">Our Company</li>
        <li class="menu_item">About US</li>  
        <li class="menu_item">Our offices</li>
        <li class="menu_item">Careers</li>
    </ul>
    <ul class="products hide_menu">
        <li class="main_item products">Our Products</li>
        <li class="menu_item">Product A</li>
        <li class="menu_item">Product B</li>
        <li class="menu_item">Communication</li>
    </ul>
</div>

CSS

ul.hide_menu .menu_item {
  display: none;
}

JavaScript

const mainItems = document.querySelectorAll('.main_item')

// Show the elements in the clicked menu
//mainItems.forEach((mainItem) => {
//  mainItem.addEventListener('click', (event) => {
//    hideCurrentlyShown()
//    const parentElement = mainItem.closest('ul')
//    parentElement.querySelectorAll('.hide_menu').forEach((hiddenItem) => {
//      hiddenItem.classList.remove('hide_menu')
//    })
//  })
//})

// Hide currently shown menu items (if any)
//const hideCurrentlyShown = () => {
//  const shownItems = document.querySelectorAll('.menu_item:not(.hide_menu)')
//  shownItems.forEach(item => item.classList.add('hide_menu'))
//}

// Also a good idea to hide both menus when clicking outside them or when clicking again on the same one
document.addEventListener('click', (e) => {
  if (!e.target.closest('.menu_wrapper')) {
    hideCurrentlyShown()
  }
})

// Show the elements in the clicked menu
mainItems.forEach((mainItem) => {
  mainItem.addEventListener('click', () => {
    const parentElement = mainItem.closest('ul')
    parentElement.classList.toggle('hide_menu')
    
    // Hide other menus that are currently shown
    //const shownMenus = document.querySelectorAll('ul:not(.hide_menu)')
    //shownMenus.forEach((menu) => {
    //  if (menu !== parentElement) {
    //    menu.classList.add('hide_menu')
    //  }
    //})
  })
})