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

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 >
  <h3>Item-1</h3>
  <p >
    dadwa dwao dawkda
  </p>
</div>

<div >
  <h3>Item-1</h3>
  <p >
    dadwa dwao dawkda
  </p>
</div>
<div >
  <h3>Item-1</h3>
  <p >
    dadwa dwao dawkda
  </p>
</div>


<button >
  Test
</button>

<button >
  Test
</button>

<button >
  Test
</button>

CodePudding user response：

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 >
  <h3>Item-1</h3>
  <p >
    dadwa dwao dawkda
  </p>
</div>

<div >
  <h3>Item-2</h3>
  <p >
    dadwa dwao dawkda
  </p>
</div>
<div >
  <h3>Item-3</h3>
  <p >
    dadwa dwao dawkda
  </p>
</div>


<button >
  Test 1
</button>

<button >
  Test 2
</button>

<button >
  Test 3
</button>