Building a responsive accordion with HTML, CSS, and JavaScript

Accordion is a user interface component that allows you to display content in a collapsible and expandable manner. It is commonly used to display a list of items with their respective content. When a user clicks on an item, it expands to reveal its content, while the others collapse to take up less space. In this tutorial, we will build a responsive accordion using HTML, CSS, and JavaScript.

HTML Structure

We will begin by creating the HTML structure for our accordion. Our accordion will have a list of items, and each item will have a heading and a content section. We will use the unordered list ul element to create our list of items. Each list item li will contain the heading h2 and the content div section. Here is the code for our HTML structure:

<div class="accordion">
  <ul>
    <li>
      <h2>Item 1</h2>
      <div class="content">
        <p>Content for Item 1</p>
      </div>
    </li>
    <li>
      <h2>Item 2</h2>
      <div class="content">
        <p>Content for Item 2</p>
      </div>
    </li>
    <li>
      <h2>Item 3</h2>
      <div class="content">
        <p>Content for Item 3</p>
      </div>
    </li>
  </ul>
</div>

CSS Styling

Next, we will apply some CSS styles to our HTML structure to make it look good. We will set the list-style to none to remove the default bullet points from our list items. We will also set the margin and padding to 0 to remove any unnecessary spacing. Here is the CSS code for our HTML structure:

.accordion {
  max-width: 600px;
  margin: 0 auto;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 1em;
}

h2 {
  background-color: #eee;
  padding: 1em;
  cursor: pointer;
  margin: 0;
}

.content {
  background-color: #fff;
  padding: 1em;
  display: none;
}

JavaScript Functionality

Now we will add some JavaScript functionality to our accordion. We will use the querySelectorAll method to select all the headings h2 of our accordion. We will then loop through them and add an event listener to each heading. When a heading is clicked, we will toggle the display of its content section. If it is currently hidden, we will display it, and if it is currently visible, we will hide it. Here is the JavaScript code for our accordion:

const accordion = document.querySelector(".accordion");
const headings = accordion.querySelectorAll("h2");

headings.forEach((heading) => {
  heading.addEventListener("click", () => {
    const content = heading.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
});

Responsive Design

Finally, we will make our accordion responsive. We will use media queries to adjust the styling of our accordion depending on the screen size. We will change the max-width of our accordion to 100% and set the padding to 1em for screens smaller than 600px. Here is the updated CSS code for our responsive accordion:

@media screen and (max-width: 600px) {
  .accordion {
    max-width: 100%;
    padding: 1em;
  }
}

Conclusion

In this tutorial, we have learned how to build a responsive accordion using HTML, CSS, and JavaScript. We started by creating the HTML structure for our accordion, followed by adding some CSS styles to make it look good. Then, we added some JavaScript functionality to our accordion to toggle the display of the content section when a heading is clicked. Finally, we made our accordion responsive using media queries. Now you can use this accordion on your website to display a list of items in an organized and collapsible manner.