How to create a Faq page template

Introduction

Frequently Asked Questions (FAQ) page on your website is important for providing instant answers to your website visitors’ common queries. If your Website is on E-commerce, Digital gadgets, Traveling, etc… an FAQ page can save time for both your customers and your support team by addressing the most common concerns and doubts. In this blog, we’ll walk you through the process of creating an interactive FAQ page using HTML, CSS, Javascript, and Bootstrap.

In this blog, we have used Bootstrap 3 Accordion to display user’s questions and answers.

FAQ Template page using bootstrap, html, css and javascript

To start, create an HTML page.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">FAQ</h1>
    <p class="lead">This is a Sample FAQ page.</p>
  </div>
</div>

<br>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
               What is Data Structure?
              </a>
            </h4>

          </div>
          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">Data structure is a fundamental concept of any programming language, essential for algorithmic design.
</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Benefits of Learning Data Structures
              </a>
            </h4>

          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">Any given problem has constraints on how fast the problem should be solved (time) and how much less resources the problem consumes(space). That is, a problem is constrained by the space and time complexity within which it has to be solved efficiently.
</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                What is an array?
              </a>
            </h4>

          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Please add the CSS code provided below.


.panel-title > a:before {
    float: right !important;
    font-family: FontAwesome;
    content:"\f068";
    padding-right: 5px;
}
body{
  background-color:#f5f5f5;
}
.panel-title > a.collapsed:before {
    float: right !important;
    content:"\f067";
}
.panel-title > a:hover, 
.panel-title > a:active, 
.panel-title > a:focus  {
    text-decoration:none;
}
.panel-heading {
    padding: 20px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}
.panel {
    margin-bottom: 20px !important;
    background-color: #ffffff;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    box-shadow: 15px 16px 13px 8px rgb(4 4 4 / 5%);
}
.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #00bcd4;
    text-align: center;
    color: #fff;
}

After adding CSS add the bootstrap cdn on the HTML file

Use this bootstrap css cdn
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css


Use below javascript cdn
https://code.jquery.com/jquery-1.11.0.min.js
https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js