CODEWITHSUNDEEP
javascript
ST80
ST80

Reputation: 3893

Javascript how to add active class to clicked element and hide all others

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?

Upvotes: 0

Views: 5058

Answers (5)

chrwahl
chrwahl

Reputation: 13060

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>

Upvotes: 1

Muhammad Semeer A
Muhammad Semeer A

Reputation: 99

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>

Upvotes: 1

Simone Rossaini
Simone Rossaini

Reputation: 8162

You can use this function for compare 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>

Upvotes: 1

BTSM
BTSM

Reputation: 1663

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'; 
    
  });  
});

Upvotes: 3

Lidprogsky
Lidprogsky

Reputation: 43

You can use document.getElementsByClassName to do that.

An example of that would look like so;

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

Upvotes: 0

Related Questions