Раздельный показ блоков по клику на кнопку

Question

Начинаю свои познания в js и столкнулся с непониманием, как сделать что бы по клику на кнопку раскрывался определённый блок а не сразу все?

let boxMore = document.querySelectorAll('.title-box');
let btnMore = document.querySelectorAll('.button');

  btnMore.forEach(function (item, i) {
    item.addEventListener('click', function (evt) {
      evt.preventDefault();

      boxMore.forEach(function (item , i) {
        boxMore[i].classList.toggle('title-box-active');
      });
    });
  });

.title-box-active p {
  height: 170px;
}

p {
  max-width: 200px;
  height: 55px;
  overflow: hidden;
}

<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>

Answer 1

Каждый блок раскрывается/сворачивается независимо:

let boxMore = document.querySelectorAll('.title-box');
let btnMore = document.querySelectorAll('.button');

btnMore.forEach(function(btn) {
  btn.addEventListener('click', function() {
    this.parentElement.classList.toggle('title-box-active');
  });
});

.title-box-active p {
  height: 170px;
}

p {
  max-width: 200px;
  height: 55px;
  overflow: hidden;
}

<div class="title-box title-box-active">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>

По типу "аккордеона":

let boxMore = document.querySelectorAll('.title-box');
let btnMore = document.querySelectorAll('.button');

btnMore.forEach(function(btn) {
  btn.addEventListener('click', function(ev) {
    boxMore.forEach(function(box, i) {
      box.classList.toggle('title-box-active', (ev.target == btnMore[i]));
    });
  });
});

.title-box-active p {
  height: 170px;
}

p {
  max-width: 200px;
  height: 55px;
  overflow: hidden;
}

<div class="title-box title-box-active">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>

Дополнительный вариант, для тех, кто "хочет то, не зная что":

let boxMore = document.querySelectorAll('.title-box');
let btnMore = document.querySelectorAll('.button');

btnMore.forEach((btn) => {
  btn.addEventListener('click', function(ev) {
    boxMore.forEach((box) => {
      if (box != this.parentElement) { box.classList.remove('title-box-active'); }
    });
    this.parentElement.classList.toggle('title-box-active');
  });
});

.title-box-active p {
  height: 170px;
}

p {
  max-width: 200px;
  height: 55px;
  overflow: hidden;
}

<div class="title-box title-box-active">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>
<div class="title-box">
  <h3>Заголовок</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button class="button">Клик</button>
</div>

БЛОГ НА HUSL

Раздельный показ блоков по клику на кнопку

Ответы (1 шт):