Coding Zemigle

Home
CSS
Editor's Choice

How to create an Accordion using HTML, CSS & JavaScript

Accordion | Coding Zemigle

An accordion is a web design element that allows you to toggle the display of content sections, making it easier to manage and display large amounts of information in a compact and organized way. Typically used in FAQs, menus, and other content-heavy areas, accordions enhance user experience by keeping the interface clean and interactive.

In this guide, we'll walk you through the process of creating a simple yet functional accordion using HTML, CSS, and JavaScript. We'll cover how to structure your HTML, style your elements with CSS, and add interactivity with JavaScript. By the end of this tutorial, you'll have a fully functional accordion that you can customize and incorporate into your own web projects.

Step 1: Setting Up the HTML structure

First, let's create the basic HTML structure. An accordion typically consists of a series of sections, each containing a header and a content panel. Here's an example of how the HTML might look:

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Accordion | Coding Zemigle</title>
</head>
<body>
  <button class="accordion">Accordion Section 1</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <button class="accordion">Accordion Section 2</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <button class="accordion">Accordion Section 3</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <script src="script.js"></script>
</body>
</html>



With this HTML structure in place, we have a solid foundation for our accordion. Next, we’ll style these elements with CSS to make them visually appealing and ensure the content is hidden until a title is clicked.
Advertisement

In this structure, each .accordion contains a button element for the header and a div for the content. This setup allows for easy styling and functionality implementation.

Step 2: Style the Accordion with CSS

Next, we'll add some styles to make the accordion look nice. We'll style the headers, the content areas, and add some transitions for a smooth expanding and collapsing effect.

✲    style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
  background: rgb(239, 231, 253);
  font-family: "Poppins", sans-serif;
  padding: 5px;
  margin-top: 50%;
}

.accordion {
  background: rgb(91, 19, 236);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 20px;
  margin: 2px;
  width: 100%;
  border: solid 1px;
  border-radius: 5px;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: rgb(91, 19, 236); 
}

.panel {
  padding: 0 15px;
  display: none;
  font-size: 14px;
  background-color: transparent;
  overflow: hidden;
}



Here, we style the accordion container, items, headers, and content. The display: none; property oon .accordion-content ensures that the content is hidden by default.
Advertisement

Step 3: Adding Interactivity with JavaScript

Finally, let's add JavaScript to handle the accordion functionality. The JavaScript will toggle the visibility of the content when the header is clicked.

✲    script.js
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;''
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

In this script, we first select all elements with the class .accordion-header. We then add a click event listener to each header. When a header is clicked, we toggle the display property of the adjacent content panel between block and none. Additionally, we ensure that any other open content panels are closed by iterating through all headers and hiding their content if they are not the currently clicked header.

Creating an accordion using HTML, CSS, and JavaScript is a straightforward process that can significantly enhance the usability of your web pages. By following the steps outlined in this article, you can create a clean and functional accordion that helps organize content and improve the user experience.

Feel free to customize the styles and functionality further to meet your specific needs. Happy coding!