How to Create an FAQ Section

Sometimes, your audience wants quick answers to common questions. When they visit your website, you can give them a direct path to those answers by featuring an FAQ page.

Every website should have an FAQ, and there are three big reasons why:

First, the concept of an FAQ is well-recognized across the web. The "Frequently Asked Questions" format originated in 1982 and has matured from offline to online. People know what it is, and they seek it out when they need information in a simple, easy-to-digest format. But it's also well-understood by Google and other search engines, allowing them to index your content more effectively. As a result, just having an FAQ page can be an instant rocket booster for your SEO.

Second, an FAQ page can help improve your overall customer experience. The more helpful your FAQ content is, the fewer clicks a website visitor needs to convert. This also translates into greater productivity for you and your team by reducing the number of calls, chat sessions, or e-mails you receive with basic questions. 

Finally, having an FAQ gives your website visitors a rapid resource for information during an emergency. As we've seen with the COVID-19 pandemic, websites have become an essential tool for keeping audiences up to date on guidance, instructions, and other critical information. A good FAQ page can help support your strategy and should have an easy-to-use backend manager for making quick revisions about closures, hours of operation, online services, and more.

You can also add features like an Alert Bar to your homepage to link people to specialized FAQ pages about your organization's COVID response. 

In this article, we'll give you the code and guidance to add an efficient FAQ section on your website. We'll be using an accordion, which allows you to feature lots of questions while "hiding" the content below each entry, making it less cumbersome. This lets your audience browse questions and view answers on the same page with a single click. 

Getting Started

To build this FAQ section, we're using Bootstrap and FontAwesome for the icons. Copy and paste the links below in the head section of your HTML file:

HTML

The main structure below is made with Bootstrap's accordion component. Bootstrap's accordions are simple Javascript enabled card components that enable showing and hiding elements with a click. They restrict the card components to only open one at a time. That means when a user clicks on a question, the answer will be revealed but when they click on another question, all other answers will be collapsed. By using the accordion style, your users can easily scan through many questions and find the information they're looking since there will be much less clutter on the page. The other benefit is the users won't have to go to another page to see the answer. In the code below, we only included a paragraph as an answer but you're free to replace and supplement the answer content with any content you'd like such as text, images or even videos. 

CSS

The CSS code adds colors, font type, and size. Copy and paste it in your stylesheet and change the styling to match your own website:

And here it is. Check out the JSFiddle below and click on the FAQ questions to reveal the answer: