Creating an Accordion with HTML, CSS, and JavaScript
An accordion is a vertically stacked list of items, each containing a header and the associated content. It allows the user to open and close each item, showing only one item at a time. In this tutorial, we will create an accordion using HTML, CSS, and JavaScript.
HTML
We will start by creating the HTML structure for our accordion. For this, we will use an unordered list with the class “accordion”. Each list item will contain a header and the content. We will also add a button element inside the header for opening and closing the content.
<ul class="accordion">
<li>
<div class="accordion-header">
<h3>Header 1</h3>
<button>+</button>
</div>
<div class="accordion-content">
<p>Content 1</p>
</div>
</li>
<li>
<div class="accordion-header">
<h3>Header 2</h3>
<button>+</button>
</div>
<div class="accordion-content">
<p>Content 2</p>
</div>
</li>
<!-- Add as many list items as you need -->
</ul>
CSS
Next, we will add some styles to our accordion. We will set the default state of the accordion-content to be hidden. We will also set the styles for the header and the button.
.accordion {
list-style: none;
margin: 0;
padding: 0;
}
.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background-color: #eee;
padding: 1rem;
}
.accordion-header h3 {
margin: 0;
}
.accordion-header button {
background-color: transparent;
border: none;
font-size: 1.5rem;
color: #666;
}
.accordion-content {
display: none;
background-color: #ddd;
padding: 1rem;
}
JavaScript
Finally, we will add the logic to open and close the accordion-content. For this, we will add a click event listener to the accordion-header. When the header is clicked, we will toggle the display of the accordion-content and change the text of the button from “+” to “-”.
const headers = document.querySelectorAll('.accordion-header');
headers.forEach(header => {
header.addEventListener('click', function() {
const content = this.nextElementSibling;
const button = this.querySelector('button');
content.style.display = content.style.display === 'block' ? 'none' : 'block';
button.textContent = button.textContent === '+' ? '-' : '+';
});
});
And that's it! You now have an accordion using HTML, CSS, and JavaScript. You can add as many items as you need, customize the styles to fit your needs, and even make it dynamic by using JavaScript to retrieve data from an API and build the accordion dynamically.
Here's the complete code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion with HTML, CSS, and JavaScript</title>
<style>
.accordion {
list-style: none;
margin: 0;
padding: 0;
}
.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background-color: #eee;
padding: 1rem;
}
.accordion-header h3 {
margin: 0;
}
.accordion-header button {
background-color: transparent;
border: none;
font-size: 1.5rem;
color: #666;
}
.accordion-content {
display: none;
background-color: #ddd;
padding: 1rem;
}
</style>
</head>
<body>
<ul class="accordion">
<li>
<div class="accordion-header">
<h3>Header 1</h3>
<button>+</button>
</div>
<div class="accordion-content">
<p>Content 1</p>
</div>
</li>
<li>
<div class="accordion-header">
<h3>Header 2</h3>
<button>+</button>
</div>
<div class="accordion-content">
<p>Content 2</p>
</div>
</li>
<!-- Add as many list items as you need -->
</ul>
<script>
const headers = document.querySelectorAll(".accordion-header");
headers.forEach((header) => {
header.addEventListener("click", function () {
const content = this.nextElementSibling;
const button = this.querySelector("button");
content.style.display = content.style.display === "block" ? "none" : "block";
button.textContent = button.textContent === "+" ? "-" : "+";
});
});
</script>
</body>
</html>
You can now go ahead and play around with the code to see how it works and add any additional features as needed. Good luck!
You may also like
Building a responsive accordion with HTML, CSS, and JavaScript
In this tutorial, we will learn how to build a responsive accordion ...
Continue readingCreating a responsive contact form with HTML, CSS, and JavaScript
Learn how to create a responsive contact form with HTML, CSS, and Ja...
Continue readingCreating an accessible website using HTML and CSS
This guide provides web developers with an overview of how to create...
Continue reading