How to create Accordion with pure JavaScript

How to create Accordion with pure JavaScript with the help of CSS and HTML.

In this article today we learn how to create accordion section using with JavaScript.

In Three step to make accordion with pure JavaScript.

1. Step – HTML code

Just Copy HTML code and put inside in html body of your page section where you want to show accordion.

<!---Start List 01-->
<div class="accordion-list">
    <div id="accordion" class="accordion-header">
      <div class="accordion-title">Lorem ipsum Question Heading?</div>
      <span class="icon"></span>
    </div>
    <div class="accordion-body">
      <div class="accordion-body-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, hic ipsam est iste adipisci ex illo natus labore earum tempore.
      </div>
    </div>
  </div>
<!---End List 01-->

How to create FAQ section using with pure JavaScript

2. Step – CSS code

Just Copy and paste code in you style.css file

.accordion-list{
  text-align: center;
  width: 90%;
  padding:10px;
  border:1px solid #ccc;
  margin-bottom:10px;

}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  min-height: 3.5rem;
  cursor: pointer;
  font-family:verdana;
  
}
.accordion-title {
  color: #545d7a;
  font-size: 1.125rem;
  font-weight: 400;
  text-align: left;
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  font-family:verdana;
}
.accordion-body-content {
  width: 80%;
  padding-top: 1em;
  color: #000;
  text-align: left;
}
.accordion-list .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 2px solid;
  width: 34px;
  height: 34px;
  color: #f7f8fc;
  transition: color 0.25s;
  position: relative;
  border-radius: 100%;
}
.accordion-list .icon:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background-color: #545d7a;
  border-radius: 20px;
  pointer-events: all;
  transition: all 0.3s ease-in-out;
}
.accordion-list .icon:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background-color: #545d7a;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}
.accordion-header.active > .icon::before {
  transform: rotate(180deg);
}
.accordion-header.active > .icon::after {
  transform: rotate(90deg);
}

Make Accordion section using with pure JavaScript

3. Step – JavaScript code

Just Copy and paste code in inside of JavaScript opening and closing tag <script type=”text/javascript”>——–</script>

const accordionHeaders = document.querySelectorAll(
  ".accordion-header"
);

accordionHeaders.forEach((accordionHeader) => {
  accordionHeader.addEventListener("click", (event) => {
    // Allow to collapse one list at a time
    const currentlyActiveAccordionHeader = document.querySelector(
      ".accordion-header.active"
    );
    if (
      currentlyActiveAccordionHeader &&
      currentlyActiveAccordionHeader !== accordionHeader
    ) {
      currentlyActiveAccordionHeader.classList.toggle("active");
      currentlyActiveAccordionHeader.nextElementSibling.style.maxHeight = 0;
    }
    //

    accordionHeader.classList.toggle("active");
    const accordionBody = accordionHeader.nextElementSibling;
    if (accordionHeader.classList.contains("active")) {
      accordionBody.style.maxHeight = accordionBody.scrollHeight + "px";
    } else {
      accordionBody.style.maxHeight = 0;
    }
  });
  accordionHeader.addEventListener("click", function () {
    document.getElementById("accordion").scrollIntoView({ behavior: "smooth" });
  });
});