<div class="accordions">
  <div class="accordion">
    <div class="accordion__title">Title Lorem ipsum, dolor sit amet</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, mollitia ut! Recusandae cupiditate exercitationem pariatur non ad? Laborum, quibusdam obcaecati! Repudiandae voluptas consectetur voluptatem recusandae minima, ipsum optio dignissimos a?</div>
  </div>
  <div class="accordion">
    <div class="accordion__title">Title Lorem ipsum, dolor sit amet</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, mollitia ut! Recusandae cupiditate exercitationem pariatur non ad? Laborum, quibusdam obcaecati! Repudiandae voluptas consectetur voluptatem recusandae minima, ipsum optio dignissimos a?</div>
  </div>
  <div class="accordion">
    <div class="accordion__title">Title Lorem ipsum, dolor sit amet</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, mollitia ut! Recusandae cupiditate exercitationem pariatur non ad? Laborum, quibusdam obcaecati! Repudiandae voluptas consectetur voluptatem recusandae minima, ipsum optio dignissimos a?</div>
  </div>
  <div class="accordion">
    <div class="accordion__title">Title Lorem ipsum, dolor sit amet</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, mollitia ut! Recusandae cupiditate exercitationem pariatur non ad? Laborum, quibusdam obcaecati! Repudiandae voluptas consectetur voluptatem recusandae minima, ipsum optio dignissimos a?</div>
  </div>
  <div class="accordion">
    <div class="accordion__title">Title Lorem ipsum, dolor sit amet</div>
    <div class="accordion__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, mollitia ut! Recusandae cupiditate exercitationem pariatur non ad? Laborum, quibusdam obcaecati! Repudiandae voluptas consectetur voluptatem recusandae minima, ipsum optio dignissimos a?</div>
  </div>
</div>

.accordions {
  display: grid;
  grid-gap: 0.5rem;
}
.accordion {
  background: #ccc;
  border-radius: 1rem;
  &__title {
    padding: 1rem;
    cursor: pointer;
  }
  &__content {
    padding: 0 1rem 1rem;
    display: none;
  }
  &.open &__content {
    display: block;
  }
}

document.querySelectorAll(".accordions").forEach((block) => {
  const accordions = block.querySelectorAll(".accordion");
  block.addEventListener("click", (e) => {
    const trigger = e.target.closest(".accordion__title");
    if (trigger) {
      const accordion = e.target.closest(".accordion");
      if (accordion.classList.contains("open")) {
        accordion.classList.remove("open");
      } else {
        block.querySelectorAll(".accordion.open").forEach((acc) => {
          acc.classList.remove("open");
        });
        accordion.classList.add("open");
      }
    }
  });
});