<p>Today, we are going to build a the accoridon we did with Tailwind CSS and AlpineJS but with JavaScript.</p>
<p>Read the article <a target="_blank" href="https://lexingtonthemes.com/tutorials/how-to-create-an-accordion-with-tailwind-css-and-javascript/">See it live and get the code</a></p>


Today, we are going to build a the accoridon we did with Tailwind CSS and AlpineJS but with JavaScript.

Read the article [See it live and get the code](https://lexingtonthemes.com/tutorials/how-to-create-an-accordion-with-tailwind-css-and-javascript/)

How to create an accordion with Tailwind CSS and JavaScript

A quick refresh of what accordions are?

Let's build the structure

The first button

The second button

The script

Event Listener Setup:

Query Selectors:

Button Click Event:

Toggle Accordion Function:

SVG Icon Loop:

Content Loop:

Conclusion

✺ UI Designer & Front end dev working on lexingtonthemes.com


A bi-weekly newsletter for web developers and UI/UX designers discovering new resources and articles about the latest and relevant trends.

How to create an accordion with Tailwind CSS and JavaScript

Table of contents