Black Friday Special: Enjoy a 35% discount on the bundles. Use code BLACKFRIDAY35 at checkout.
Today, we are going to build a the accoridon we did with Tailwind CSS and AlpineJS but with JavaScript.
An accordion is a way to display a list of items that can be expanded and collapsed, it also saves space by not displaying all the items at once. It’s a great way to organize information and make it easier to read, especially for longer lists.
Understanding the code:
id="accordion"
: This is the ID of the accordion container. id="accordionBtn1"
: This is the ID of the button that opens the first accordion item.class="accordion-btn"
: This is the class that will be applied to the button that opens the accordion.class="accordion-icon"
: This is the class that will be applied to the SVG icon inside the button.id="accordionIcon1"
: This is the ID of the SVG icon that will be used to open the first accordion item.id="accordionContent1"
: This is the ID of the content that will be displayed when the first accordion item is opened.id="accordionBtn2"
: This is the ID of the button that opens the second accordion item.class="accordion-btn"
: This is the class that will be applied to the button that opens the accordion.class="accordion-icon"
: This is the class that will be applied to the SVG icon inside the button.id="accordionIcon2"
: This is the ID of the SVG icon that will be used to open the second accordion item.id="accordionContent2"
: This is the ID of the content that will be displayed when the second accordion item is opened.Classes are removed for brevity, but I’ll keep those classes relevant to the tutorial.
<div
id="accordion">
<!-- Accordion Item 1 -->
<div>
<button
id="accordionBtn1"
class="accordion-btn">
<span>What time is it?</span>
<svg
class="accordion-icon ..."
id="accordionIcon1">
<!---- SVG path goes here --->
</svg>
</button>
<div
id="accordionContent1"
class="accordion-content ... hidden">
I don't know what time it is.
</div>
</div>
<!-- Accordion Item 2 -->
<div>
<button
id="accordionBtn2"
class="accordion-btn ...">
<span>Why not?</span>
<svg
class="accordion-icon ..."
id="accordionIcon2">
<!---- SVG path goes here --->
</svg>
</button>
<div
id="accordionContent2"
class="accordion-content ... hidden">
Because I have lost the notion of time.
</div>
</div>
<!-- Add more Items here -->
</div>
Understanding the code:
document.addEventListener("DOMContentLoaded", function() {
: This is the event listener that will be triggered when the page is loaded.const accordionBtns = document.querySelectorAll(".accordion-btn");
: This is the query selector that will select all the buttons inside the accordion container.const accordionIcons = document.querySelectorAll(".accordion-icon");
: This is the query selector that will select all the SVG icons inside the accordion container.const accordionContents = document.querySelectorAll(".accordion-content");
: This is the query selector that will select all the content inside the accordion container.accordionBtns.forEach((btn, index) => {
: This is the forEach loop that will iterate over each button inside the accordion container.btn.addEventListener("click", () => {
: This is the event listener that will be triggered when a button is clicked.toggleAccordion(index);
: This is the function that will be called when a button is clicked.function toggleAccordion(index) {
: This is the function that will be called when a button is clicked.accordionIcons.forEach((icon, i) => {
: This is the forEach loop that will iterate over each SVG icon inside the accordion container.if (i === index) {
: This is the condition that will be checked when the index of the button is equal to the index of the SVG icon.icon.classList.toggle("rotate-45");
: This is the function that will be called when the condition is true.accordionContents.forEach((content, i) => {
: This is the forEach loop that will iterate over each content inside the accordion container.if (i === index) {
: This is the condition that will be checked when the index of the button is equal to the index of the content.content.classList.toggle("hidden");
: This is the function that will be called when the condition is true.content.classList.add("hidden");
: This is the function that will be called when the condition is false.The full script:
document.addEventListener("DOMContentLoaded", function() {
const accordionBtns = document.querySelectorAll(".accordion-btn");
const accordionIcons = document.querySelectorAll(".accordion-icon");
const accordionContents = document.querySelectorAll(".accordion-content");
accordionBtns.forEach((btn, index) => {
btn.addEventListener("click", () => {
toggleAccordion(index);
});
});
function toggleAccordion(index) {
accordionIcons.forEach((icon, i) => {
if (i === index) {
icon.classList.toggle("rotate-45");
} else {
icon.classList.remove("rotate-45");
}
});
accordionContents.forEach((content, i) => {
if (i === index) {
content.classList.toggle("hidden");
} else {
content.classList.add("hidden");
}
});
}
});
In this tutorial, we learned how to create an accordion with Tailwind CSS and JavaScript. We covered the basics of HTML, CSS, and JavaScript, and we also learned how to use Tailwind CSS to style the accordion. We also explored how to use JavaScript to toggle the visibility of the accordion items and the SVG icons. By following these steps, you can create a custom accordion that fits your needs and style preferences.
Do not forget to make fully accessible for all users, and to test your code on different devices and browsers to ensure that it works correctly.
Hope you enjoyed this tutorial and have a good day
/Michael Andreuzza
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!