Create Accordion in HTML CSS & JavaScript

Create Accordion in HTML CSS & JavaScript

Hello friend, hope you are doing great. Today in this blog, you will learn to create a Responsive Accordion in HTML CSS, and JavaScript. There are lots of JavaScript Projects I have made to date, obviously accordion too, but in that accordion, there was no feature of auto close while we clicked on the second tab. Now in this accordion, I have added an auto-close feature.

An Accordion is a section that contains a header and description with open and close functionality.
Basically, the description of the accordion is in hidden status and we have to click on the header section to get a description. Every accordion's header has its own description. The accordion can be made of various text content, for eg FAQ.

Let's have a quick look at the given image of our accordion. There is a total of four tabs with different beautiful background colors. In every tab, there are different questions and icons. As you have seen on the second tab, it is in the opened state and the other three are in the closed state. If you click on every tab it will open and close also If one is in opened condition and you clicked on another tab the previously opened tab will automatically close and, the tab you have clicked will be opened.

You can the demo of this accordion and all the HTML CSS and JavaScript code that I have used to create this beautiful accordion.



All the HTML CSS and JavaScript code that I have used to create this accordion has been uploaded below before you jump into the source code, I would like to explain some basic points of this video tutorial on the accordion.

 As you have seen on the video tutorial of your accordion. In the first, all the accordions were in closed form. When I clicked on the tab it opened and when I clicked on it a second time it was closed. While the accordion tab opened you saw some description of that accordion tab or section. When I leave the tab open and click on the other tab the previous tab automatically closed.

To make the UI design of this accordion I have used HTM and CSS and to open and close it and obviously auto close it, I have used Javascript code

I hope now you can build this accordion by using HTML CSS and JavaScript. If you are feeling difficulty making this accordion. I have provided all the source codes below.

You Might Like This:

Create Accordion [Source Code]

To get the following HTML CSS and JavaScript code for an Accordion. You need to create three files, HTML, CSS, and JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

CSS CODE:

JAVASCRIPT CODE:





Previous Post Next Post

Contact Form