javascript toggle menu on and off

Question

Hey everyone I have been struggling with the nav menu and getting it to toggle on and off, it seems to be turning on and off in the dev tools but the li links don't disappear, I have tried rewriting the code, but still can't get it to work, I double checked to make sure i was selecting the right elements, please if anyone can help I would sincerely appreciate it! Thank You here is the code:

const showMenu = (toggleId, navId) => {
  const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)

  if (toggle && nav) {
    toggle.addEventListener("click", () => {
      nav.classList.toggle("show");
    })
  }
};

showMenu('nav-toggle', 'nav-menu');

<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>


<header class="1-header" id="header">
  <nav class="nav bd-grid">
    <div class='nav_toggle' id='nav-toggle'>
      <i class="bx bxs-grid"></i>
    </div>
    <!-- <a href="#" class="nav_logo">Roby</a> -->
    <a href="#" class="nav_logo">Sneaker Warehouse</a>

    <div class='nav_menu' id='nav-menu'>
      <ul class="nav_list">
        <li class="nav_item"><a href="#home" class="nav_link active">Home</a></li>
        <li class="nav_item"><a href="#featured" class="nav_link">Featured</a></li>
        <li class="nav_item"><a href="#women" class="nav_link">Women</a></li>
        <li class="nav_item"><a href="#new" class="nav_link">New</a></li>
        <li class="nav_item"><a href="./shop.html" class="nav_link">Shop</a></li>
      </ul>
    </div>

    <div class="nav_shop">
      <i class="bx bx-shopping-bag"></i>
    </div>
  </nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>

Answer 1

I got it working by reading one of the comments on this post. you forgot to add the css.

html

<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>


<header class="1-header" id="header">
  <nav class="nav bd-grid">
    <div class='nav_toggle' id='nav-toggle'>
      <i class="bx bxs-grid"></i>
    </div>
    <!-- <a href="#" class="nav_logo">Roby</a> -->
    <a href="#" class="nav_logo">Sneaker Warehouse</a>

    <button class='nav_menu' id='nav-menu'>
      <ul class="nav_list">
        <li class="nav_item"><a href="#home" class="nav_link active">Home</a></li>
        <li class="nav_item"><a href="#featured" class="nav_link">Featured</a></li>
        <li class="nav_item"><a href="#women" class="nav_link">Women</a></li>
        <li class="nav_item"><a href="#new" class="nav_link">New</a></li>
        <li class="nav_item"><a href="./shop.html" class="nav_link">Shop</a></li>
      </ul>
    </button>

    <div class="nav_shop">
      <i class="bx bx-shopping-bag"></i>
    </div>
  </nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>

js

const showMenu = (toggleId, navId) => {
  const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)

  if (toggle && nav) {
    toggle.addEventListener("click", () => {
      nav.classList.toggle("show");
      toggle.classList.toggle("show");
    })
  }
};

showMenu('nav-toggle', 'nav-menu');

css

.nav_menu {
  display: none;
}

.show {
  display: initial;
}