DEV Community

Cover image for Responsive Accordion Design using HTML, CSS, and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Responsive Accordion Design using HTML, CSS, and Javascript

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. 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.

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.

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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');
      });
    });
Enter fullscreen mode Exit fullscreen mode

Discussion (5)

Collapse
iankduffy profile image
Ian Duffy

Have you thought about using the details and summary html elements, so you don't need the JS.

Collapse
link2twenty profile image
Andrew Bone

You'd still need some JS (to ensure only one panel is open at a time) but this is definitely the way!

Collapse
lukeshiru profile image
Luke Shiru

You might want to take a look at this a11y example to make it more accessible.

Collapse
supportic profile image
Supportic

I built a responsive accordion with JS classes and I thought how the F this would work responsively without JS. Turns out it doesn't, the max-height is 20rem. Won't show all content once it crosses that height.

Collapse
fjones profile image
FJones

0 -> auto works, but isn't animated, and 0% -> 100% doesn't quite do what you would expect.