Simple FAQ page HTML template

Screenshot of our FAQ page HTML template

Let’s develop a simple FAQ page HTML template that we can use in different projects. Most of the time, FAQ pages have a list of questions where users will be able to click. Upon clicking the answer will be displayed.

Simple.

First, we will go ahead and create our folder structure like this.

The folder structure of our FAQ page html template.
The folder structure of our FAQ page html template

Working with the HTML file

Next, we will generate a boilerplate HTML5 using atoms (my IDE). Also, let’s add a header and main section. This is a good semantic HTML5 usage that I am trying to get used to. And I believe you should too.

Here is the boilerplate that you can use too.

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Frequently Asked Questions</title>
	</head>
	<body>
		<main>
      <header>
			  <h1>Frequently Asked Questions</h1>
		  </header>
			<section class="faq-container">

			</section>
		</main>
	</body>
</html>

At this point, our HTML is ready, right? Almost. First, we have to include the CSS and JavaScript files. This is something I forget most often.

<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>

Note: the script has to be added either before the end of the body tag or with the defer keyword as I did above. This is because our script could block the rendering of our HTML page.

In addition to including our CSS, we want to use a font from google fonts. Hence, let’s include it right before our CSS file link.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Alright. Now we are ready to add some FAQs and style them.

Before that, Let’s generate some dummy FAQs wrapped with divs of class ‘faq' and put them in the section section. So, now our HTML looks something like this.

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>Frequently Asked Questions</title>
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link 
         href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" 
         rel="stylesheet">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<main>
			<header>
				<h1>Frequently Asked Questions</h1>
			</header>
			<section>
					<div class="faq">
						<h2>What is FAQ Page?</h2>
						<p>Lorem ipsum dolor sit amet, 
               consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt u.</p>
					</div>
					<div class="faq">
						<h2>How can I use this FAQ page HTML template?</h2>
						<p>Lorem ipsum dolor sit amet, .</p>
					</div>
					<div class="faq">
						<h2>Where can I find other HTML teplates?</h2>
						<p>Lorem ipsum dolor sit amet, </p>
					</div>
			</section>
		</main>
	</body>
</html>

Working with the CSS file of the FAQ page html template

That is our final HTML. Now, we can proceed to style it using CSS. So let’s open the CSS file, which is style.css. We have created it at the start of this tutorial. If you haven’t already, go ahead and do it now.

body {
	font-family: Poppins, sans-serif;
	font-size: 16px;
}
main {
	margin: 3rem 6rem;
  padding: 2rem;
}

Let’s start by setting the font-family and font-size in our CSS file. Then, we center the whole main content using margins. Make sure to use rem when setting the margin.

Unlike pixels, rems are relative units. So our design looks good on mobile as well as desktop from the beginning.

Things are looking good. But we probably want the design to look better. So let’s add a linear gradient background to the body, but this gradient will repeat itself, hence we must set it to no-repeat with a background-size of cover value. But that will make it break at the bottom, hence we will set the minimum height of the body as 100vh.

Let’s also add #ddd as the background for main section.

Note: vh is viewport height. Which is a unit that works with the size of our user’s device screen.

body {
	font-family: Poppins, sans-serif;
	font-size: 16px;
	background-image: linear-gradient(180deg, #5ee, #000bbb);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
}
main {
	margin: 3rem 6rem;
	padding: 2rem;
	background-color: #ddd;
}

Here we are. And our background is a cool-looking gradient.

Designing for mobile first by using relative units like rem.

Now our FAQ page is looking decent. Next, let’s style the header and the divs.

header {
	padding: 1rem;
}
.faq {
	padding: .2rem 2rem;
	border-radius: 5px;
	border-bottom: 1px solid #fff;
	cursor: pointer;
}
.faq:hover {
	background-color: #bbb;
}
.faq p {
	display: none;
}
.faq.active {
	background-color: #fff;
}
.faq.active p {
	display: block;
}

Let me explain what you see in the above snippet of code. First I gave the header padding so it gets some breathing space. Also I gave some padding for the faq divs.

Furthermore, I gave the faq divs a border at the bottom and a border-radius of 5px to make them look round at the edges. But we won’t be able to notice that for now.

Note that I have also added a cursor CSS property with a value of ‘pointer’. That is because I want the whole div to be clickable. Additionally, I have made them to react to hover by applying a darker background on hover.

Finally, I have applied a display CSS attribute with a value of ‘none’ for all paragraphs in the divs. That means we will be able to see only the titles of FAQs at first. However, if the divs have a CSS class of active applied on them, we will see the whole thing.

That means we will have to toggle this CSS class when users click on the divs. And that is what we will do next using JavaScript.

Toggling the FAQ divs visibility on click using JavaScript

We are now ready to open that script.js file and write some JavaScript to make our FAQ page HTML template interactive. So let’s go ahead and do that. First, we want to listen for click events on the divs. That means I have to query all the divs and loop over them. For that, we can use the DOM API.

const faqDivs = document.querySelectorAll('.faq');

What we did in the above code snippet is, we accessed all the divs with .faq class attached to them and put them in a constant variable called faqDIvs. Now we have a nodeList in faqDivs, which is like an array and we can use forEach to loop over it. The reason we want to loop over it is to listen for clicks on each of the divs. So let’s go ahead and do that.

faqDiv.forEach((div) => {
   div.addEventListener('click', () => {
      console.log("Clicked");
   });
});

Again, let me elaborate on what is happening. As we said, faqDiv is a node list of our faq divs. Therefore, we loop and access each of these divs using the forEach. Once we did that, we called an anonymous function where we will listen for click event using the addEventListener. Right now when a user clicks, our page only logs the clicked string. Hence, let’s go ahead and toggle that active CSS class we talked about earlier.

faqDiv.forEach((div) => {
   div.addEventListener('click', (e) => {
       e.target.closest('.faq').classList.toggle('active');
   });
});

The e that I am passing for the anonymous function above is the event object. If you console log it, you will get a lot of information. One of the information is target which is the clicked object, in our case it could be either the div or anything inside it because of event propagation. As a result, I will use the method called closest and pass it .faq which will look up the closest ancestor of the element clicked. That means I can guarantee that I am working with the div with a class of faq.

Once I have the div, I can look up the classList, which gives me all the classes of the div and toggle active on it. That means the DOM will add and remove the active class from the list of the CSS classes the div has.

We have finally gove all our files ready for our FAQ page HTML template. Now our FAQ page is interactive and we can use it either in our WordPress theme or anywhere we like.

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Learn Modern JS, CSS, & PHP

Subscribe to learn modern PHP in the most simple way.