How to Create an Accordion with CSS and JavaScript

how-to-create-an-accordion-with-css-and-javascript

An accordion is a UI component that allows users to toggle the visibility of content sections by clicking on their respective headers.

This interactive element can greatly enhance the user experience on websites and web applications.

In this tutorial, we will explore how to create an accordion using CSS and JavaScript.

HTML Structure

The HTML structure of an accordion is simple.

Each content section should be wrapped in a container element with a header element that will act as the trigger.

In this example, we will use a div container with a button header.

<div class="accordion">
  <button class="accordion-header">Header 1</button>
  <div class="accordion-content">
    Content 1
  </div>
  <button class="accordion-header">Header 2</button>
  <div class="accordion-content">
    Content 2
  </div>
  <button class="accordion-header">Header 3</button>
  <div class="accordion-content">
    Content 3
  </div>
</div>

CSS Styles

We will use CSS to style the accordion and hide the content sections by default.

.accordion {
width: 80%;
margin: 0 auto;
}

.accordion-header {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.accordion-content {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}

JavaScript Functionality

To add the toggle functionality, we will use JavaScript.

The script will add a click event listener to each header and toggle the visibility of the corresponding content section.

var headers = document.querySelectorAll(".accordion-header");

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

Adding Active Class

We can also add an active class to the header that is currently open.

for (var i = 0; i < headers.length; i++) {
headers[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {scsscontent.style.display = "block";
}

});
}

Styling the Active Class

We can also add styles to the active header for better visual cues.

.accordion-header.active {
background-color: #ddd;
}

Conclusion

With a few lines of HTML, CSS, and JavaScript, we have created a fully functional accordion component.

You can easily customize this example to fit your specific needs.

This component can greatly improve the user experience by organizing content into smaller, manageable sections.

Try experimenting with different styles and animations to make your accordion unique.

Tags

Related Posts