How to Create an Creative 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.

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:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

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.

<div class="text-center">
    <h2 class="mt-5 mb-5">FAQ</h2>
</div>
<section class="container my-5" id="maincontent">
    <section id="accordion">
        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary border-top" aria-controls="faq-17" aria-expanded="false" data-toggle="collapse" href="#faq-17" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    What if I want custom gear?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-17" style="">
            <div class="card card-body border-0 p-0">
                <p>Custom gear can be ordered through our contact form. Additional fees may apply.</p>

            </div>
        </div>

        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary  border-top" aria-controls="faq-20" aria-expanded="false" data-toggle="collapse" href="#faq-20" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    What is the best email to reach you at?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-20">
            <div class="card card-body border-0 p-0">
                <p>The best email for any inquiries is email@email.com!</p>
                <p>
                </p>
            </div>
        </div>

        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary  border-top" aria-controls="faq-21" aria-expanded="false" data-toggle="collapse" href="#faq-21" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    Where can I read more about this company?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-21">
            <div class="card card-body border-0 p-0">
                <p>Lorem ipsum dolor sit!</p>
                <p>
                </p>
            </div>
        </div>

        <a class="py-3 d-block h-100 w-100 position-relative z-index-1 pr-1 text-secondary  border-top" aria-controls="faq-22" aria-expanded="false" data-toggle="collapse" href="#faq-22" role="button">
            <div class="position-relative">
                <h2 class="h4 m-0 pr-3">
                    What is the best time to call?
                </h2>
                <div class="position-absolute top-0 right-0 h-100 d-flex align-items-center">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </a>
        <div class="collapse" id="faq-22">
            <div class="card card-body border-0 p-0">
                <p>The best time to call is 24/7! We are always available to answer any questions.</p>
                <p>
                </p>
            </div>
        </div>
    </section>
</section>

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:

.text-secondary {
    color: #3d5d6f;
}

.h4,
h4 {
    font-size: 1.2rem;
}

h2 {
    color: #333;
}

.fa,
.fas {
    font-family: 'FontAwesome';
    font-weight: 400;
    font-size: 1.2rem;
    font-style: normal;
}

.right-0 {
    right: 0;
}

.top-0 {
    top: 0;
}

.h-100 {
    height: 100%;
}

a.text-secondary:focus,
a.text-secondary:hover {
    text-decoration: none;
    color: #22343e;
}

#accordion .fa-plus {
    transition: -webkit-transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}

#accordion a[aria-expanded=true] .fa-plus {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

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

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.