<div class="cont">
  <div class="panel">
    <button class="panel__button">Кнопка</button>
    <p class="panel__content">Контент</p>
  </div>
  <div class="panel">
    <button class="panel__button">кнопка</button>
    <p class="panel__content">Контент</p>
  </div>
  <div class="panel">
    <button class="panel__button">кнопка</button>
    <p class="panel__content">Контент</p>
  </div>

  <div class="panel">
    <button class="panel__button">кнопка</button>
    <p class="panel__content">Контент</p>
  </div>
</div>
body {
  background: #efefef;
  font-family: "Oswald", sans-serif;
}

.cont {
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  margin: 50px auto;
}

.panel {
  padding: 30px 30px;
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 10px;
  margin: 5px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}

.panel__button {
  font-size: 15px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 500ms;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  font-family: "Oswald", sans-serif;
  background: cornflowerblue;
  padding: 5px 10px;
  border-radius: 5px;
}

.panel__content {
  margin-top: 20px;
  color: #fff;
  letter-spacing: 1px;
  font-family: "Oswald", sans-serif;
  display: none;
  background: #252525;
  padding: 10px;
  border-radius: 5px;
}

.panel__button-active {
  color: #fff;
  background: #252525;
}

.panel__content-active {
  display: block;
}
const element = document.querySelectorAll(".panel");

element.forEach((el) => {
  const button = el.querySelector(".panel__button");
  const content = el.querySelector(".panel__content");

  button.addEventListener("click", (e) => {
    const activeClassButton = "panel__button-active";
    const activeClassContent = "panel__content-active";
    const activeButton = document.querySelectorAll(".panel__button");
    const activeContent = document.querySelectorAll(".panel__content");

    activeButton.forEach((n) =>
      n !== button ? n.classList.remove(activeClassButton) : null
    );
    activeContent.forEach((n) =>
      n !== content ? n.classList.remove(activeClassContent) : null
    );

    button.classList.toggle(activeClassButton);
    content.classList.toggle(activeClassContent);
  });
});

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.