<!--* Icons -->
<!-- Google Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" />
<!--* third accordion example -->
<section class="accordion-examples">
  <h2 class="accordion-examples__heading">Accordion 3</h2>

  <div class="accordion3-wrapper">
    <!-- first accordion -->
    <div class="accordion3-card">
      <h3 class="accordion3-card__header">
        Header 1
        <span class="icons material-icons-outlined">
          add_circle_outline
        </span>
      </h3>
      <p class="accordion3-card__body">
        Lorem ipsum, dolor sit amet consectetur adipisicing 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="accordion3-card">
      <h3 class="accordion3-card__header">
        Header 2
        <span class="icons material-icons-outlined">
          add_circle_outline
        </span>
      </h3>
      <p class="accordion3-card__body">
        Lorem ipsum, dolor sit amet consectetur adipisicing 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="accordion3-card">
      <h3 class="accordion3-card__header">
        Header 3
        <span class="icons material-icons-outlined">
          add_circle_outline
        </span>
      </h3>
      <p class="accordion3-card__body">
        Lorem ipsum, dolor sit amet consectetur adipisicing 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>
</section>

/* ! project styles */
.accordion-examples__heading {
  text-align: center;
}
/* accordion wrapper */
.accordion3-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

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

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

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

/* accordion body */
.accordion3-card__body {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
  display: none;
}

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

.active {
  display: block;
}

// * Function for accordion 3
// variables
const accordion3BtnToggle = document.querySelectorAll(
  ".accordion3-card__header"
);

// adding event listener to the accordion3 toggle button
for (i of accordion3BtnToggle) {
  i.addEventListener("click", accordion3ToggleFunction);
}

// here the other bodies automatically close then the current one is open
function accordion3ToggleFunction() {
  for (i of accordion3BtnToggle) {
    i.nextElementSibling.style.display = "none";
    i.children[0].classList.remove("toggleIcon");
  }
  if (this.nextElementSibling.style.display == "none") {
    this.nextElementSibling.style.display = "block";
    this.children[0].classList.add("toggleIcon");
  }
}