Responsive Accordion Design using HTML, CSS, and Javascript
Tags: html, javascript, css, incoder
Published: 2022-02-20 13:49:05

Hello readers, today in this blog you'll learn how to create a responsive accordion design using HTML, CSS, and Javascript. In our previous blog, we saw [how to create custom context or right-click menu design using HTML, CSS, and Javascript](https://incoderweb.blogspot.com/2022/02/custom-context-or-right-click-menu.html). Now it's time to create a responsive accordion design. I've also shared many projects related to Javascript. So don't forget to [check here](https://incoderweb.blogspot.com/search/label/Javascript).

An accordion is an element used in the graphical user interface. Nowadays almost every website uses an accordion for answering frequently asked questions (FAQ).

In this design [Responsive Accordion Design] we have an accordion in the middle of the page as you can see in the image above. When you click on an item then a class will be added by javascript and the accordion will open with a smooth transition. The background color of the header part will be changed. If you're feeling difficulty understanding what am I trying to say? So you can check source code and preview as well.

Preview is available [here](https://incoderweb.blogspot.com/2022/02/responsive-accordion-design-using-html.html).

##Responsive Accordion Design [Source Code]

##HTML Code

```
<!-- ---------------- Created By InCoder ---------------- -->
<!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">
  <title>Responsive FAQ Accordion Design - InCoder</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>

<body>
  <div class="accordionBox">
    <div class="accordionItem">
      <div class="header">
        <h3>First Accordion</h3>
        <i class="fa-solid fa-angle-right"></i>
      </div>
      <div class="body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam praesentium ut nobis, maxime nisi
        porro. Consectetur blanditiis cum molestias doloremque?
      </div>
    </div>
    <div class="accordionItem">
      <div class="header">
        <h3>Second Accordion</h3>
        <i class="fa-solid fa-angle-right"></i>
      </div>
      <div class="body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam praesentium ut nobis, maxime nisi
        porro. Consectetur blanditiis cum molestias doloremque?
      </div>
    </div>
    <div class="accordionItem">
      <div class="header">
        <h3>Third Accordion</h3>
        <i class="fa-solid fa-angle-right"></i>
      </div>
      <div class="body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam praesentium ut nobis, maxime nisi
        porro. Consectetur blanditiis cum molestias doloremque?
      </div>
    </div>
    <div class="accordionItem">
      <div class="header">
        <h3>Fourth Accordion</h3>
        <i class="fa-solid fa-angle-right"></i>
      </div>
      <div class="body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam praesentium ut nobis, maxime nisi
        porro. Consectetur blanditiis cum molestias doloremque?
      </div>
    </div>
  </div>
</body>

</html>
```
##CSS Code

```
/* ---------------- Created By InCoder ---------------- */

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

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  max-height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #00c785;
}

.accordionBox {
  width: 30rem;
  margin: 1.8rem;
  max-width: 30rem;
  padding: 10px 10px;
  border-radius: 0.4rem;
  background-color: #fff;
}

.accordionItem {
  transition: all 0.4s;
  border-radius: 0.4rem;
}

.accordionItem:first-child {
  margin-top: 0 !important;
}

.accordionItem:last-child {
  margin-bottom: 0 !important;
}

.accordionItem .header {
  display: flex;
  cursor: pointer;
  padding: 10px 10px;
  align-items: center;
  border-radius: 0.4rem;
  justify-content: space-between;
}

.accordionItem .header h3,
.accordionItem .header i {
  pointer-events: none;
}

.accordionItem .header:hover {
  background-color: rgba(0, 199, 133, 0.21);
}

.accordionItem .header i {
  font-size: 18px;
  margin-right: 15px;
}

.accordionItem .body {
  max-height: 0;
  overflow: hidden;
  margin-top: 0.5rem;
  transition: all 0.4s;
  margin-left: 1.5rem;
}

.accordionItem.active {
  margin: 10px 0px;
  background-color: rgba(0, 199, 133, 0.16);
}

.accordionItem.active .body {
  margin-top: 10px;
  max-height: 20rem;
  padding-bottom: 0.5rem;
}

.accordionItem.active .header {
  background-color: rgba(0, 199, 133, 0.21);
}

.accordionItem.active .header i {
  transition: all 0.3s;
  transform: rotate(90deg);
}
```

##Javascript Code

```
let accordion = document.querySelector('.accordionBox'),
      accordionItem = document.querySelectorAll('.accordionItem');
    accordionItem.forEach(elem => {
      elem.addEventListener('click', function(e) {
        e.srcElement.parentElement.classList.toggle('active');
      });
    });
```