<div class="accordion-wrapper">
  <!-- first accordion -->
  <div class="accordion-card">
    <h3 class="accordion-card__header">
      Header 1
      <span class="icon"> + </span>
    </h3>
    <p class="accordion-card__content">
      Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et neque, velit
      quasi quos quia nulla omnis! Similique dolorum, veniam facilis aliquam est
      fuga aperiam voluptatibus, sapiente atque vitae quia accusamus.
    </p>
  </div>

  <!-- second accordion -->
  <div class="accordion-card">
    <h3 class="accordion-card__header">
      Header 2
      <span class="icon"> + </span>
    </h3>
    <p class="accordion-card__content">
      Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et neque, velit
      quasi quos quia nulla omnis! Similique dolorum, veniam facilis aliquam est
      fuga aperiam voluptatibus, sapiente atque vitae quia accusamus.
    </p>
  </div>

  <!-- third accordion -->
  <div class="accordion-card">
    <h3 class="accordion-card__header">
      Header 3
      <span class="icon"> + </span>
    </h3>
    <p class="accordion-card__content">
      Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et neque, velit
      quasi quos quia nulla omnis! Similique dolorum, veniam facilis aliquam est
      fuga aperiam voluptatibus, sapiente atque vitae quia accusamus.
    </p>
  </div>
</div>
/* ! project styles */
.accordion-examples__heading {
  text-align: center;
}

/* accordion wrapper */
.accordion-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top:50px;
}

/* accordion card */
.accordion-card {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}

/* accordion header */
.accordion-card__header {
  color: #202020;
  position: relative;
  padding: 10px;
  margin: 0;
}

/* icon */
.icon {
  position: absolute;
  right: 10px;
  color: goldenrod;
  transform: rotate(0deg);
  transition: transform 300ms, color 300ms;
}

/* accordion content */
.accordion-card__content {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
  display: none;
  margin: 0;
}

/* javascript css classes to be added and removed */
.toggleIcon {
  transform: rotate(45deg);
  color: hsl(0, 70%, 50%);
}

.active {
  display: block;
}
// variables
const accordionBtnToggle = document.querySelectorAll(".accordion-card__header");

// Adding event listener to the accordion toggle button
for (i of accordionBtnToggle) {
  i.addEventListener("click", accordionToggleFunction);
}

// function to open an accordion
function accordionToggleFunction() {
  this.nextElementSibling.classList.toggle("active");
  this.children[0].classList.toggle("toggleIcon");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.