Creating an Accordion using vanilla Javascript

AkshayKhot07 — Wed, 24 Aug 2022 11:40:05 +0000

Let's create a Facts Accordion using HTML, CSS and Vanilla Javascript

Firstly we will create an HTML skeleton of the accordion. There will be 4 Facts card. So the HTML will look like the below :

    <div class="container">
      <h2 class="accordion-title">Facts About Mars!</h2>
      <div class="faq-container grid">

        <div class="faq-item">
          <header class="faq-header">
            <i class="ri-add-line"></i>
            <h4 class="faq-header-title">Also known as the Red Planet</h4>
          </header>
          <div class="faq-desp">
            <p class="faq-desp-content">
              This is because Mars is covered in soil, rock, and dust made from
              iron oxide which gives the surface a red rusty colour
            </p>
          </div>
        </div>

     </div>
    </div>

There will be 3 more facts card [div with a class of faq-item] inside the [div with a class of faq-container]. We will use CSS grid to structure the facts cards:
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

Our goal is to show/hide the Facts card description [div tag with a class of faq-desp] by clicking on the card header [header tag with a class of faq-header]

Firstly we will hide the Facts card description using the CSS property height: 0px and overflow: hidden like below:
.faq-desp { overflow: hidden; height: 0px; }

Now the exciting part is to toggle (show/hide) the description using Javascript. Code snippet below:

const faqItems = document.querySelectorAll(".faq-item");

faqItems.forEach((faq) => {
  const faqHeader = faq.querySelector(".faq-header");

  faqHeader.addEventListener("click", () => {
    const openFaq = document.querySelector(".faq-open");

    toogleFaq(faq);

    if (openFaq && openFaq !== faq) {
      toogleFaq(openFaq);
    }
  });
});

const toogleFaq = (faq) => {
  const faqDescription = faq.querySelector(".faq-desp");

  if (faq.classList.contains("faq-open")) {
    faqDescription.removeAttribute("style");
    faq.classList.remove("faq-open");
  } else {
    faqDescription.style.height = faqDescription.scrollHeight + "px";
    faq.classList.add("faq-open");
  }
};

Steps to achieve the goal:

Select all Facts cards using querySelectorAll
Loop over each card using forEach and select the card header
Add a click event listener on the header and call the toggle function (it shows/hide the fact card description) with the card as an argument in the callback function of the event listener
The toggle function selects the card description and adds an inline style of height which is equal to the scrollHeight. [The scrollHeight property returns the height of an element including padding, but excluding borders, scrollbars, or margins]
We have achieved our goal. Rest I have added additional styles to make the accordion look presentable

Please find the complete code in the codesandbox here: Code Sandbox

Forem: AkshayKhot07

Creating an Accordion using vanilla Javascript