DEV Community

Cover image for Best way to build an accordion FAQ in html, css and js
Coding Jitsu
Coding Jitsu

Posted on

Best way to build an accordion FAQ in html, css and js

checkout my YT channel for more videos.

Here is all the code used in the video.

Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="stylesheet.css" />
    <title>FAQ | Web Component</title>
  </head>
  <body>
    <div class="container">
      <h2>Frequently Asked Questions</h2>
      <div class="accordion">
        <div class="accordion-item">
          <button aria-expanded="false">
            <span class="accordion-title"
              >Why is the moon sometimes out during the day?</span
            >
            <span class="icon" aria-hidden="true"></span>
          </button>
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
              suspendisse potenti.
            </p>
          </div>
        </div>
        <div class="accordion-item">
          <button aria-expanded="false">
            <span class="accordion-title">Why is the sky blue?</span>
            <span class="icon" aria-hidden="true"></span>
          </button>
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
              suspendisse potenti.
            </p>
          </div>
        </div>
        <div class="accordion-item">
          <button aria-expanded="false">
            <span class="accordion-title">Will we ever discover aliens?</span>
            <span class="icon" aria-hidden="true"></span>
          </button>
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
              suspendisse potenti.
            </p>
          </div>
        </div>
        <div class="accordion-item">
          <button aria-expanded="false">
            <span class="accordion-title">How much does the Earth weigh?</span>
            <span class="icon" aria-hidden="true"></span>
          </button>
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
              suspendisse potenti.
            </p>
          </div>
        </div>
        <div class="accordion-item">
          <button aria-expanded="false">
            <span class="accordion-title">How do airplanes stay up?</span>
            <span class="icon" aria-hidden="true"></span>
          </button>
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra
              suspendisse potenti.
            </p>
          </div>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

stylesheet.css:

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #fff;
  --text: #314b6b;
  --gray: #4d5974;
  --lightgray: #e5e5e5;
  --blue: #2f79ce;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--bg);
  color: var(--gray);
  min-height: 100vh;
}

.container {
  margin: 0 auto;
  padding: 4rem;
  width: 48rem;
}

.accordion {
  margin-top: 20px;
}

.accordion .accordion-item {
  border-bottom: 1px solid var(--lightgray);
}

.accordion .accordion-item button[aria-expanded="true"] {
  border-bottom: 1px solid var(--blue);
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 400;
  border: none;
  outline: none;
  background: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: var(--blue);
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion .accordion-item button[aria-expanded="true"] {
  color: var(--blue);
}

.accordion .accordion-item button[aria-expanded="true"] .icon::after {
  width: 0;
}

.accordion .accordion-item button[aria-expanded="true"] + .content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
}

.content {
  opacity: 0;
  max-height: 0;
  transition: opacity 200ms linear, max-height 200ms linear;
}

.content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 1em 0;
}

Enter fullscreen mode Exit fullscreen mode

app.js:

const items = document.querySelectorAll(".accordion button");

items.forEach((item) => item.addEventListener("click", toggleAccordion));

function toggleAccordion() {
  const itemToggle = this.getAttribute("aria-expanded");

  for (let item of items) {
    item.setAttribute("aria-expanded", false);
  }

  if (itemToggle === "false") {
    this.setAttribute("aria-expanded", true);
  }
}

Enter fullscreen mode Exit fullscreen mode

Discussion (0)