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>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>