<div class='v1'>
  <h1>1. Относительно кнопки</h1>
  <div class="item">
    <div class="trigger">trigger</div>
    <div class="content hidden">content</div>
  </div>
  <hr>
  <div class="item">
    <div class="trigger">trigger</div>
    <div class="content hidden">content</div>
  </div>
</div>
<div class='v2'>
  <h1>2. С прямым указанием</h1>
  <div class="item">
    <div class="trigger" data-toggle="#content1">trigger</div>
    <div id="content1" class="content hidden">content</div>
  </div>
  <hr>
  <div class="item">
    <div class="trigger" data-toggle="#content2">trigger</div>
    <div id="content2" class="content hidden">content</div>
  </div>
</div>
<div class='v3'>
  <h1>3. без JS на чекбоксах</h1>
  <div class="item">
    <input type="checkbox" class="hidden" id="toggle1">
    <label for="toggle1">
      <div class="trigger">trigger</div>
    </label>
    <div class="content">content</div>
  </div>
  <hr>
  <div class="item">
    <input type="checkbox" class="hidden" id="toggle2">
    <label for="toggle2">
      <div class="trigger">trigger</div>
    </label>
    <div class="content">content</div>
  </div>
</div>
<div class='v4'>
  <h1>4. без JS на details/summary</h1>
  <details>
    <summary>
      <div class="trigger">trigger</div>
    </summary>
    <div class="content">content</div>
  </details>
  <hr>
  <details>
    <summary>
      <div class="trigger">trigger</div>
    </summary>
    <div class="content">content</div>
  </details>
</div>

.trigger {
  background: red;
  display: inline-flex;
  padding: 10px;
}

.content {
  padding: 10px;
}

.hidden {
  display: none;
}

input[type="checkbox"] ~ .content {
  display: none;
}

input[type="checkbox"]:checked ~ .content {
  display: block;
}

summary::-webkit-details-marker {
  display:none;
}
summary {
  display: block;
}

// 1. Относительно кнопок
const buttonsV1 = document.querySelectorAll('.v1 .trigger');
buttonsV1.forEach(
  (btn) => btn.addEventListener(
    'click',
    (e) => e.target.closest('.item').querySelector('.content').classList.toggle('hidden'),
  ),
);

// 2. С прямым указанием
const buttonsV2 = document.querySelectorAll('.v2 .trigger');
buttonsV2.forEach(
  (btn) => btn.addEventListener(
    'click',
    (e) => document.querySelector(e.target.dataset.toggle)?.classList.toggle('hidden'),
  ),
);