How to create an FAQ section using javascript html and css

Live Example

I have prepared a live demo of an FAQ accordion to show you that we can put, images, videos, lists, and basically what ever html element we want to display it as an answer. Try it out, click on the questions to see the answers.

Quick answer

1. Create an index.html file and use the below code structure, for each question.

   <div class="faq">
   	<div class="question">
   		<!-- Place your question -->
   	</div>
   	<div class="answer">
   		<!-- Place you answer -->
   	</div>
   </div>
   		

   
   
2. In the css file hide the answer element by setting the max-height property to zero, and the overflow property to hidden.

   .faq .answer{
   	max-height: 0;
   	overflow: hidden;
   }	
   		

   
   
3. In the javascript file, target all elements with a question class. Loop over them and assign an onclick event-listener to each one.

   let faqElements = document.querySelectorAll(".question");
   for(let faqElement of faqElements){
   	faqElement.addEventListener("click", (event) => {
   	
   	});
   }
   		

   
   
4. Next inside the function target the answer element and use the element.scrollHeight property to calculate the height of the answer element, and assign it to the max-height property to display the element.

   		if(event.target.nextElementSibling.style.maxHeight == 0){
   			event.target.nextElementSibling.style.maxHeight = event.target.nextElementSibling.scrollHeight + "px";
   		}else{
   			event.target.nextElementSibling.style.maxHeight = "";
   		}
   		

Those are the basic steps needed to create the FAQ accordion. If this is covering you, that is pretty awesome. But if not, follow along with the tutorial and happy coding.

Project's folder

To create our above FAQ section we need three files, and two folders.

\-- faq-page
  |-- index.php		
  |-- script.js
  |-- styles.css		
  
  |-- video
    |-- video.mp4

  |-- images
    |-- image.png

• An index.html file to write the html code.
• A script.js JavaScript file to write the javascript code.
• And a styles.css stylesheet to make our section to look pretty.
• Also we need a video/ folder to host the video that we display.
• And an images/ folder for the image that we have.

The CSS code

We are going to start our project from the css file. Copy the code below and place it in the styles.css file that you have created, so every element that we will write in the index.html file will have its styling applied.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: sans-serif;
	min-height: 100vh;
	color: #555;
	padding: 50px;
}
h1{
	margin-bottom: 40px;
	font-size: 26px;
}
.faq{
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 0px;
	border-bottom: thin dotted #d4d4d4;
}

.faq .question{
	cursor: pointer;
	font-size: 18px;
}

.faq .question::after{
	content: "\2304";
	display: inline-block;
	position: absolute;
	transform: translateY(-10px);
	right: 0;
	font-size: 20px;
	transition: transform .2s ease;
	color: #999;
}

.faq .question.active::after{
	transform: translateY(0px) rotate(-180deg);
}

.faq .answer{
	max-height: 0;
	transition: max-height .1s ease;
	overflow: hidden;
	padding-top: 10px;
	padding-left: 10px;
	line-height: 26px;
	color: #666;
}
.faq .answer img{
	width: 200px;
	float: left;
	padding-right: 20px;
	display: inline-block;
	margin-top: 10px;
}
.faq .answer ol{
	padding-left: 20px;
}
.faq .answer ol li{
	margin-bottom: 10px;
}

• The rules that's worth mention in the css file are:
• In line 29 we use the ::after pseudo class on the question element to create the down arrow.
• In line 40 we have an active class that we will apply to the question element with JavaScript, so we rotate the down arrow to point up.
• In line 45 we set the max-height property to zero, and in line 47 the overflow property to hidden. This will hide the answer element. Later we will use javascript to set the correct max-height value to make the element slide down. Also in line 46 we use the transition property to animate the element's max-height.
• The rest is just basic css.

The index.html file

In the index.html file we have a basic html structure, with a link to the stylesheet in line 6, and a script tag that points to our javascript file in line 11.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<title>Faq page</title>
</head>
<body>

	<script src="script.js"></script> <!-- Link to the javascript file -->
</body>
</html>	

The FAQ structure

Now let's go inside the body tags and structure the FAQ section. Every question will look like this. and we are going to have four of them.

<div class="faq">
	<div class="question">
		<!-- Place your question -->
	</div>
	<div class="answer">
		<!-- Place you answer -->
	</div>
</div>

So this is what it looks like. Inside the question elements we have our questions, and inside the answer elements we have the answers in which we include, in the first question an image, in the second question an ordered list, in the third question an ordered list and a video element, and in the fourth just plain text.

If you download the source code you will get the image, and the video file.

	<div class="faq">
		<div class="question">How to structure a php and mysql pagination</div>
		<div class="answer">
			<img src="images/thumb.png" alt="">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
			Ratione quae cum dicta! Reiciendis velit ad rerum, quo, explicabo qui animi. <br>
			Lorem ipsum dolor, sit amet consectetur, adipisicing elit. 
			Est doloribus tempore minus, praesentium eum harum atque 
			nostrum pariatur aut iste beatae repellendus sequi impedit aliquam eius
			possimus modi, cum placeat accusamus facere reiciendis laudantium nihil. 
			Ipsam sed provident vel dolorem aliquam dignissimos soluta corrupti. 
			Quam mollitia culpa suscipit, eveniet quia.
		</div>
	</div>

	<div class="faq">
		<div class="question">How to upload a file without using a form with Ajax</div>
		<div class="answer">
			<ol>
				<li>
					Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
					Obcaecati, suscipit!
				</li>
				<li>
					Lorem, ipsum, dolor sit amet consectetur adipisicing elit. 
					Nihil voluptate, quo repellendus nobis laborum similique 
					molestiae provident illum praesentium cumque.
				</li>
				<li>
					Lorem ipsum, dolor sit amet.
				</li>
				<li>
					Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Assumenda, 
					sit, voluptatum? Excepturi deserunt quo incidunt est quia, facilis, 
					nisi quaerat error veniam earum quam eligendi ab autem 
					reprehenderit perspiciatis nobis!
				</li>
			</ol>
		</div>
	</div>

	<div class="faq">
		<div class="question">How to create a simple php and mysql pagination</div>
		<div class="answer">
			<ol>
				<li>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, incidunt.
				</li>
				<li>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
					Amet facere impedit nihil in numquam reprehenderit 
					quidem veritatis atque natus eveniet!
				</li>
			</ol>
			<video width="480px" controls>
				<source src="video/example.mp4" type="video/mp4">
			</video>
		</div>
	</div>

	<div class="faq">
		<div class="question">How to generate a random secure password with php</div>
		<div class="answer">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
			Ratione quae cum dicta! Reiciendis velit ad rerum, quo, explicabo qui animi. 
			<br> <br>
			Lorem ipsum dolor, sit amet consectetur, adipisicing elit. 
			Est doloribus tempore minus, praesentium eum harum atque 
			nostrum pariatur aut iste beatae repellendus sequi impedit aliquam eius
			possimus modi, cum placeat accusamus facere reiciendis laudantium nihil. 
			Ipsam sed provident vel dolorem aliquam dignissimos soluta corrupti. 
			Quam mollitia culpa suscipit, eveniet quia.
		</div>
	</div>

This is all the html code that we need, now we will go to the javascript file to make the accordion to work.

The JavaScript code

let questions = document.querySelectorAll(".question");

for(let question of questions){
	question.addEventListener("click", (event) => {
		event.target.classList.toggle("active");

		if(event.target.nextElementSibling.style.maxHeight == 0){
			event.target.nextElementSibling.style.maxHeight = event.target.nextElementSibling.scrollHeight + "px";
		}else{
			event.target.nextElementSibling.style.maxHeight = "";
		}
	});
}

Let's explain the above javascript code

• In line 1, we target all html elements that have a class of question, and we store them in the questions variable.
• Next in line 3 we loop through the questions elements, and in line 4 we assign an onclick event-listener on each question element.
• In the callback arrow function we pass in the (event) object. The event object will help us to target the question element that we clicked on.
• So in line 5 we target the clicked question element and with the use of the classList object we toggle the css active class. Remember that the active class rotates the arrow to look up.
• Next in the if statement we target the nextElementSibling which is the answer element, and if its max-height is zero. We know that it is zero because we set it in the css file.
• So in line 8 we target again the answer's max-height property and we set it equal to its scrollHeight value. The scrollHeight property gives us the actual height of an element even if it is hidden. In this way we don't need to worry how much content the element has. This will make the answer element to slide down.
• Else we set the max-height to an empty string. This will reset the value to zero and make the answer element to slide up and hide.

And that's it. That is all the code we need to make our FAQ page to work.

Summary

We saw how to create an FAQ section using HTML, CSS, and JavaScript.
I hope you liked it.

Source code

You can download the source code and use it in any way you like.

Times downloaded: 26

Buy me a coffee