Как сделать независимые toggle button?

Question

[khalel2]

Чтобы каждый открывал именно свой контент.
Сделать индивидуальный идентификатор не пойдет, там 1000 таких кнопок

<button onclick="showHide()" class="toggle__button">Раскрыть</button>
  <h1 class="toggle__elements hide">1</h1>


  <button onclick="showHide()" class="toggle__button">Раскрыть</button>
  <h1 class="toggle__elements hide">2</h1>


  <button onclick="showHide()" class="toggle__button">Раскрыть</button>
  <h1 class="toggle__elements hide">3</h1>

let userSection = document.querySelector(".toggle__elements");
let isShow = true

function showHide(){
  isShow=!isShow
  userSection.classList.toggle("hide", isShow);
}

Answer 1

[Danny Arty]

Ну если учитывать, что блок контента - это соседний элемент кнопки, то можно сделать так:

var elements = document.getElementsByClassName('toggle__button');
Array.from(elements).forEach(function(element) {
      element.addEventListener('click', function() {
           this.nextElementSibling.classList.toggle('hide');
      });
});

Answer 2

[Алексей Илларионов]

Если они идут в строгом порядке друг за другом:

let buttons = document.querySelectorAll(".toggle__elements");
buttons.forEach( button => {
   button.onclick = () => {
       button.nextSibling.classList.toggle("hide")
   }
})