Creating Accordion in Vanilla JS

In this article, I’ve intended to teach you how to create accordion in vanilla JS.

An accordion is everywhere if you explore the web you may know what’s accordion if don’t know I elucidate it for you.

An accordion is simply used for FAQ which is a frequently asked question. it is used at the end of a web page for clarifying users' thoughts.

In the HTML part, I used a button tag for triggering accordion detail and I put the content or the answer part in panel class.

Now I want to add some design to my accordion.

And Now It’s time for JS.

first I targeted the accordion button to trigger the accordion content.

I used for loop to loop through all the accordion buttons.

I added an event listener for all accordion buttons.

I used this which is a confusing keyword in JS but here this means the current button which is being triggered.

I am a web developer who writes web development content for you to make web development easier