I have a list-item-menu, where when I click on one of them it gets an active class, while I want all other list-items to get hidden but I'm not sure how to do that.

Here is my script so far:

const items = document.querySelectorAll('.menu-item');

items.forEach((item) => {
   item.addEventListener('click', (e) => {
      item.classList.toggle('active')

      // HIDE ALL OTHER "item"-elements
  })
});

can someone help me out?

I have a list-item-menu, where when I click on one of them it gets an active class, while I want all other list-items to get hidden but I'm not sure how to do that.

Here is my script so far:

const items = document.querySelectorAll('.menu-item');

items.forEach((item) => {
   item.addEventListener('click', (e) => {
      item.classList.toggle('active')

      // HIDE ALL OTHER "item"-elements
  })
});

can someone help me out?

• javascript

Share Follow asked May 19, 2021 at 8:16 ST80ST80 3,9131717 gold badges7272 silver badges145145 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I think you can implement that function like this.

 const items = document.querySelectorAll('.menu-item');

items .forEach(item => {
  item.addEventListener("click", function() {   
   items .forEach(a=>{
      a.classList.remove("active");
      a.style.display = 'none'; 
    });
     item.classList.add("active");
     item.style.display = 'block'; 
    
  });  
});

You can use this function for pare index and toggle class.
I used colors for the example:

const items = document.querySelectorAll('.menu-item');

items.forEach((item, idx) => {  
  item.addEventListener('click', () => {   
    ToggleActive(item,idx);
  });
});

function ToggleActive(el,index) {
  el.classList.toggle('active');
  items.forEach((item,idx) => {
    if(idx !== index){
      item.classList.remove("active");
    }
  });
}

.active{
  color:blue;
}

<div class='menu-item'>Menu 1</div>
<div class='menu-item'>Menu 2</div>
<div class='menu-item'>Menu 3</div>
<div class='menu-item'>Menu 4</div>

Try This

const items = document.querySelectorAll(".menu-item");
      items.forEach((item) => {
        item.addEventListener("click", (e) => {
          item.classList.toggle("active");
          let itemsArray = [...items];
          let array = itemsArray.filter((item) => item !== e.target);
          array.forEach((elem) => {
            //   to toggle hidden
            elem.hidden = !elem.hidden;
          });
        });
      });

<button class="menu-item">1</button>
<button class="menu-item">2</button>
<button class="menu-item">3</button>
<button class="menu-item">4</button>
<button class="menu-item">5</button>

You only need to listen for event on the parent element (here the ul) and then you can use closest() to find the element that you need to be active.

const ul = document.querySelector('ul');

ul.addEventListener('click', e => {
  e.preventDefault();
  let li = e.target.closest('li');
  if (li) {
    ul.querySelectorAll('li').forEach(elm => elm.classList.remove('active'));
    li.classList.add('active');
  }
});

li.active a {
  color: red;
}

<ul>
  <li><a href="1">Item 1</a></li>
  <li><a href="2">Item 2</a></li>
  <li><a href="3">Item 3</a></li>
  <li><a href="4">Item 4</a></li>
</ul>

You can use document.getElementsByClassName to do that.

An example of that would look like so;

document.getElementsByClassName('.menu-item')[0].style.visibility = 'hidden';