<div class="accordion">
  <div class="accordion__title">
    <p>Как стать участником программы?</p>
    <button type="button" class="accordion__btn">
      <span></span>
      <span></span>
    </button>
  </div>
  <div class="accordion__text">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo ipsum voluptatibus, mollitia iste voluptates temporibus nihil reprehenderit tempora itaque, eligendi nesciunt dicta placeat odit omnis odio sed autem esse cum!
    </p>
  </div>
  <div class="accordion__line"></div>
</div>

*
  margin: 0
  padding: 0
  box-sizing: border-box

.accordion
  margin: auto
  width: 590px
  
.accordion__title
  display: flex
  justify-content: space-between
  align-items: center
  
.accordion__btn
  position: relative
  width: 30px
  height: 30px
  border: none
  border-radius: 50%
  transition: 0.4s
  cursor: pointer
  span
    &:first-child
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      display: block
      width: 11px
      height: 1px
      background: #000
    &:last-child
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      display: block
      width: 1px
      height: 11px
      background: #000
  &:hover
    transform: rotate(45deg)
  
.accordion__text
  display: none
  
.accordion__line
  margin-top: 26px
  width: 100%
  height: 1px
  background: #C8DAEA
  
.active
  .accordion__text
    display: block

const questions = document.querySelectorAll(".accordion");

questions.forEach((question) => {
  const btn = question.querySelector(".accordion__btn");

  btn.addEventListener("click", () => {
    //console.log(question);
    questions.forEach((item) => {
      if (item !== question) {
        item.classList.remove("active");
        //console.log(item);
      }
    });

    question.classList.toggle("active");

    //console.log(question);
  });
});