FAQ Accordion Section with HTML & CSS

Hello Coders, In this article we are going to learn how to create FAQ Accordion Section using HTML CSS and JS.

What is FAQ Section?

FAQ means Frequently asked questions. Most of the websites on the internet often use FAQ section to answer few of the repeatedly asked questions. For example, users might have few questions on a product that all other users might have the same questions. So in that case, FAQ section helps them get answer for their questions.

How many questions to add in FAQ Section ?

A Typical website has around 5-10 questions answered which are asked frequently. If your website has more questions to be answered then its okay to add as much as you want. 5-10 would be great.

You may also like to read :

I have provided step by step video tutorial as well as complete source code of FAQ accordion section in this article. 

FAQ Accordion Section in HTML CSS and JavaScript | Video Tutorial

In the above video, I have shown how to build FAQ section in step by step way and I have also shown how it works. Consider watching the video tutorial if you are a beginner.

FAQ Section Accordion with HTML CSS and JavaScript | Source Code

Below I have given all the necessary source code for you to build it. You can also download complete source code of FAQ section from the download button at the bottom of this article.

How do I create FAQ Section in HTML? Free HTML Source Code
Create an index.html file. Add all the boiler plate such as html, head, title, body tags. Follow the below html code to complete the html part

HTML Code : Create a main container. Inside the main container create another container with class 'accordion'. This is going to hold all our accordion items. Inside the accordion create 5 accordion item div tags. And add the following code.

How do I design FAQ Section in CSS? Free CSS Source Code
Create an styles.css file and link it our html document. Now its time to add some CSS. Follow the below css code to complete the CSS part.

CSS Code : For the CSS, we are going to use a custom font imported from the google font. Go head and start typing the CSS code from top to bottom and start observing the changes.

JavaScript Code : Lets make it work when we click on the text as well as the button. Follow the below javascript code. First we will select the button which is inside the accordion and call a function when we click on it.

This is what you will get at the end as a result.

FAQ Accordion Section with HTML & CSS

Thank you for Reading this article

Credits: Katherine Kato

Click on the download button to directly Download Source Code of FAQ Accordion Section.

Post a Comment

Previous Post Next Post