Share:
       
   

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" });
  });
});

Preview:-

Create Accordion Section with Pure JavaScript

About Raka Rocks

Hi, My self Raka Rocks. I am web designer and Front End Developer total 8 year exp. in this fields. I am a continuous blogger and has blogged on different topics. He loves to surf the Internet and always tries to get new ideas about new technologies and innovations and share this excellent information with all technology lovers.

Leave a Reply

Your email address will not be published.