<div class="dropdown">
  <button class="dropdown__back">Назад</button>
  <div class="dropdown__first">
    <h2 class="dropdown__button" data-id="1">Вступление в CPO</h2>
    <div class="dropdown__content data-id-1">
       <ul>
         <li>CPO Проектировщиков</li>
         <li>CPO Изыскателей</li>
         <li>Внесение спеиалистов в национальные реестр</li>
         <li>Прохождение проверки в CPO</li>
       </ul>
    </div>
  </div>
  <div class="dropdown__two">
    <h2 class="dropdown__button" data-id="2">Вступление в CPO</h2>
    <div class="dropdown__content data-id-2">
       <ul>
         <li>CPO Проектировщиков</li>
         <li>CPO Изыскателей</li>
         <li>Внесение спеиалистов в национальные реестр</li>
         <li>Прохождение проверки в CPO</li>
       </ul>
  </div>
</div>

.dropdown__content {
  height: 0;
  overflow: hidden;
}
.dropdown__content.active {
  height: 100px
}
.dropdown__back {
  opacity: 0;
}
.dropdown__back.active {
  opacity: 1;
}
.dropdown__button {
  cursor: pointer;
}

const buttons = document.querySelectorAll(".dropdown__button")
const buttonBack = document.querySelector(".dropdown__back")
const allContent = document.querySelectorAll(".dropdown__content")
buttons.forEach(item => {
  item.addEventListener('click', (ev) => {
    const target = ev.target
    const clicked = document.querySelector(`.data-id-${target.dataset.id}`)
    if (!clicked.classList.contains("active")) {
      allContent.forEach(item => item.classList.remove("active"))
      clicked.classList.add("active")
    }
    let counter = 0
    allContent.forEach(item => {
      if (item.classList.contains("active")) counter += 1
    })
    if (counter > 0) {
      buttonBack.classList.add("active")
    } else {
      buttonBack.classList.remove("active")
    }
  })
})
buttonBack.addEventListener("click", () => {
  allContent.forEach(elem => elem.classList.remove("active"))
  buttonBack.classList.remove("active")
})