VwLPbpG

index.html

<section class="accordion-section clearfix mt-3" aria-label="Question Accordions">
  <div class="container">

    <h2>Frequently Asked Questions </h2>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">


      <div class="panel panel-default">
        <div class="panel-heading p-3 mb-3" role="tab" id="heading2">
          <h3 class="panel-title">
            <a class="collapsed" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
              What is the uptime for Solodev CMS?
            </a>
          </h3>
        </div>
        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
          <div class="panel-body px-3 mb-4">
            <p>Using Amazon AWS technology which is an industry leader for reliability you will be able to experience an uptime in the vicinity of 99.95%.</p>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>

scripts

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

style.css

h2 {
  font-family: Arial, Verdana;
  font-weight: 800;
  font-size: 2.5rem;
  color: #091f2f;
  text-transform: uppercase;
}

.accordion-section .panel-default>.panel-heading {
  border: 0;
  background: #f4f4f4;
  padding: 0;
}

.accordion-section .panel-default .panel-title a {
  display: block;
  font-style: italic;
  font-size: 1.5rem;
}

.accordion-section .panel-default .panel-title a:after {
  font-family: 'FontAwesome';
  font-style: normal;
  font-size: 3rem;
  content: "\f106";
  color: #1f7de2;
  float: right;
  margin-top: -12px;
}

.accordion-section .panel-default .panel-title a.collapsed:after {
  content: "\f107";
}

.accordion-section .panel-default .panel-body {
  font-size: 1.2rem;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

vwlpbpg.markdown

VwLPbpG

A Pen by Drew on CodePen.

License.