Best way to build an accordion FAQ in html, css and js
Tags: html, css, javascript, webdev
Published: 2021-11-14 20:29:11

{% youtube LlMpQjSaSyU%}    

_checkout my [YT channel](https://www.youtube.com/channel/UCOql8GiyvTDDeM7ECiRu2Sg) for more videos._

Here is all the code used in the video.

###Index.html:
```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>

```  

###stylesheet.css:
```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;
}

``` 

###app.js:
```javascript
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);
  }
}

```