0

I am trying to create toggling script to show and hide menu. Whenever I add event listener to the menu icon, it won't hide the text, even after adding const text = document.querySelectorAll('.span-text');

Why is this happening?

Can someone help me with this and also after clicking menu again, to make it go back to it's original width?

   const closeMenu = document.querySelector('.menuClose');
    const menu = document.querySelector('.box1');
    const logoText = document.querySelector('.logo-text');
    const text = document.querySelectorAll('.span-text');
    closeMenu.addEventListener("click", () => {
        menu.style.width = "70px";
        text.style.display = "none";
        logoText.style.display = "none";
    })
.box1 {
  width: 240px;
  background: red;
  height: 100vh;
  position: fixed;
  box-sizing: border-box;
}


* {
  margin: 0;
  padding: 0;
}

.box2 {
  background: blue;
  width: 100%;
}

.flex {
  display: flex;
}
.d-none {
  display: none;
}
.logo {
  text-align: center;
  font-size: 40px;
  margin-bottom: 40px;
}

.pusher {
  margin-left: 240px;
}

.icon {
  width: 70px;
}



.nav__item {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  cursor: pointer;
}
   <script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>

<div class="flex">
<div class="pusher"></div>
<div class="box1">
    <div class="logo">
        <h4 class="logo-text">Logo</h4>
        <box-icon name='menu-alt-right' class="menuClose"></box-icon>
    </div>
    
    <ul>

        <li class="nav__item">
            <box-icon name='home' class="icon"></box-icon>
            <span class="span-text">Home page</span>
        </li>
        <li class="nav__item">
            <box-icon name='home' class="icon"></box-icon>
            <span class="span-text">Home page</span>
        </li>

        <li class="nav__item">
            <box-icon name='home' class="icon"></box-icon>
            <span class="span-text">Home page</span>
        </li>

    </ul>
</div>
<div class="box2">
    <p>dadaw</p>
</div>
</div>
Dave
  • 1
  • 1
  • 9
  • 38
  • `querySelectorAll` returns a NodeList (multiple elements). You need to loop over them, you cannot simply do `document.querySelectorAll('foo').text = 'bar';` – blex Dec 11 '20 at 23:11
  • Why would you want to hide every menu item when you can close an entire list at the same time by accessing the `u`l tag: `const menu_ul = document.querySelector('.box1 ul');` and `menu_ul.style.display = "none"`. – s.kuznetsov Dec 11 '20 at 23:21
  • @sergey kuznetsov , thats wrong, because you close everything by using ul, I just need to close the text – Dave Dec 11 '20 at 23:24
  • @Stackerss, Then you need `querySelectorAll`. I wanted to make a decision for you, but the question is closed, and I technically cannot do it :( – s.kuznetsov Dec 11 '20 at 23:27

0 Answers0