On button click, hide elements and display the one I need

Question

Whenever I click on the first button, I want to hide rest of elements and display the title with description for first item, I want to do this for the rest items as well. Whenever I am trying to do this, I am not able to target all elements in my function. Can someone assist? Also should I add to the buttons something like data-* and based on that display/show the div?

 class MyClass { constructor() { this.items = document.querySelectorAll('.test'); this.btn = document.querySelector('.click'); console.log(this.items); //logs elements this.btn.addEventListener("click", this.testFunc); } testFunc() { console.log(this.items); //undefined? } } new MyClass();

 .test { display: none; }

 <div class="item first"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item second"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item third"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <button class="click"> Test </button> <button class="click"> Test </button> <button class="click"> Test </button>

Answer 1

The following update to your MyClass should do the trick.

The main change is that you attach an event listenter to all buttons (changed querySelector('.click') to querySelectorAll('.click') . And the helper function showItem takes an index which is which item to show (and hide all the rest).

I'm using the hidden attribute to show/hide elements. You could instead add or remove a class from the item that has the display: none .

 class MyClass { constructor() { this.items = document.querySelectorAll(".test"); this.btns = document.querySelectorAll(".click"); this.items.forEach((item, index) => { item.setAttribute("hidden", true); this.btns.item(index).addEventListener("click", (ev) => this.showItem(index)); }); } showItem(idx) { this.items.forEach((item, index) => { if (index === idx) { item.removeAttribute("hidden"); } else { item.setAttribute("hidden", true); } }); } } new MyClass();

 <div class="item first"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item second"> <h3>Item-2</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item third"> <h3>Item-3</h3> <p class="test"> dadwa dwao dawkda </p> </div> <button class="click"> Test 1 </button> <button class="click"> Test 2 </button> <button class="click"> Test 3 </button>