<div class="container">
  <div class="accordion">
    <div class="accordion__opener">
    <h2 class="accordion__title">Title 1</h2>
    <button class="accordion__btn"></button>
      </div>
    <div class="accordion__content">
      <p class="accordion__paragraph">This is accordion 1</p>
      </div>
  </div>
  
  <div class="accordion accordion-dark">
    <div class="accordion__opener">
    <h2 class="accordion__title">Title 2</h2>
    <button class="accordion__btn"></button>
      </div>
    <div class="accordion__content">
      <p class="accordion__paragraph">This is accordion 2</p>
      </div>
  </div>
  
   <div class="accordion accordion-blue">
    <div class="accordion__opener">
    <h2 class="accordion__title">Title 3</h2>
    <button class="accordion__btn"></button>
      </div>
    <div class="accordion__content">
      <p class="accordion__paragraph">This is accordion 3</p>
      </div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}
.accordion {
  border: 1px solid lightgray;
  padding: 0.3rem 0.6rem;
  width: 15rem;

  &-dark {
    background-color: black;
    color: white;
  }
  &-blue {
    background-color: rgb(0, 0, 255, 0.4);
    color: white;
  }

  &__opener {
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  &__btn {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: inherit;
  }
  &__btn::after {
    content: "+";
  }
  &__content {
    height: 0px;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
  }

  &__active {
    margin: 1rem 0;
    height: 100%;
    overflow: auto;
  }

  &__btn-active::after {
    content: "--";
    font-size: 1.5rem;
  }
}
View Compiled
const container = document.querySelector(".container");
container.addEventListener("click", (e) => {
  e.stopPropagation();
  const target = e.target;
  const accordion = target.closest(".accordion");
  
  if(accordion === null) return;

  if (target.classList.contains("accordion__btn")) {
    const accordionContent = target
      .closest(".accordion")
      .querySelector(".accordion__content");
    if (accordionContent === null) return;

    accordionContent.classList.toggle("accordion__active");
    target.classList.toggle("accordion__btn-active");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.