Accordions

<div class="container">
  <div class="row">
    <!-- Default Accordion-->
    <div class="accordion-default">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
              Collapsible Group 1</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
              Collapsible Group 2</a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
              Collapsible Group 3</a>
            </h4>
          </div>
          <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <!-- Custom Accordion FAQ 1 -->
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="accordion-1">
        <div class="panel-group" id="accordion-1" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                  Q: What is Lorem Ipsum?
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Q: What is Lorem Ipsum?
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Q: What is Lorem Ipsum?
                </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
          </div>
        </div><!--/ panel-group -->
      </div><!--/ accordion-1 -->
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="accordion-1">
        <div class="panel-group" id="accordion-2" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingFour">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                  Q: What is Lorem Ipsum?
                </a>
              </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingFive">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                  Q: What is Lorem Ipsum?
                </a>
              </h4>
            </div>
            <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingSix">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                  Q: What is Lorem Ipsum?
                </a>
              </h4>
            </div>
            <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
          </div>
        </div><!--/ panel-group -->
      </div><!--/ accordion-2 -->
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">
    <!-- Custom Accordion FAQ 2-->
    <div class="col-sm-12">
      <div class="accordion-2 m-t-20">
        <div class="panel-group" id="accordion-faq-2" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-1">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-faq-2" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
                  Q: When do I need a lawyer?
                </a>
              </h4>
            </div>
            <div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <div class="divider"></div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-2">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-faq-2" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                  Q: Can I contact you for a free consultation?
                </a>
              </h4>
            </div>
            <div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <div class="divider"></div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-3">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-faq-2" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                  Q: What do business lawyers do?
                </a>
              </h4>
            </div>
            <div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <div class="divider"></div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-4">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-faq-2" href="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
                  Q: What is a family lawyer?
                </a>
              </h4>
            </div>
            <div id="collapse-4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-4">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <div class="divider"></div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-5">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-faq-2" href="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
                  Q: How much do lawyer's cost?
                </a>
              </h4>
            </div>
            <div id="collapse-5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-5">
              <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <div class="divider"></div>
              </div>
            </div>
          </div>
        </div><!--/ panel-group -->
      </div><!--/ accordion-2 -->
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

<div class="container">
  <div class="row">

    <div class="col-md-4">
      <h5>Dark</h5>
      <!-- Accordion Dark Background -->
      <div class="accordion-dark">
        <div class="panel-group" id="accordion-dark">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-dark" href="#collapse_1">
                Collapsible Group 1</a>
              </h4>
            </div>
            <div id="collapse_1" class="panel-collapse collapse in">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-dark" href="#collapse_2">
                Collapsible Group 2</a>
              </h4>
            </div>
            <div id="collapse_2" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-dark" href="#collapse_3">
                Collapsible Group 3</a>
              </h4>
            </div>
            <div id="collapse_3" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <h5>Primary</h5>
      <!-- Accordion Primary Background -->
      <div class="accordion-primary">
        <div class="panel-group" id="accordion-primary">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-primary" href="#collapse_4">
                Collapsible Group 1</a>
              </h4>
            </div>
            <div id="collapse_4" class="panel-collapse collapse in">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-primary" href="#collapse_5">
                Collapsible Group 2</a>
              </h4>
            </div>
            <div id="collapse_5" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-primary" href="#collapse_6">
                Collapsible Group 3</a>
              </h4>
            </div>
            <div id="collapse_6" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <h5>Success</h5>
      <!-- Accordion Success Background -->
      <div class="accordion-success">
        <div class="panel-group" id="accordion-success">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-success" href="#collapse_7">
                Collapsible Group 1</a>
              </h4>
            </div>
            <div id="collapse_7" class="panel-collapse collapse in">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-success" href="#collapse_8">
                Collapsible Group 2</a>
              </h4>
            </div>
            <div id="collapse_8" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-success" href="#collapse_9">
                Collapsible Group 3</a>
              </h4>
            </div>
            <div id="collapse_9" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <h5>Info</h5>
      <!-- Accordion Info Background -->
      <div class="accordion-info">
        <div class="panel-group" id="accordion-info">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-info" href="#collapse--1">
                Collapsible Group 1</a>
              </h4>
            </div>
            <div id="collapse--1" class="panel-collapse collapse in">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-info" href="#collapse--2">
                Collapsible Group 2</a>
              </h4>
            </div>
            <div id="collapse--2" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-info" href="#collapse--3">
                Collapsible Group 3</a>
              </h4>
            </div>
            <div id="collapse--3" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <h5>Warning</h5>
      <!-- Accordion Warning Background -->
      <div class="accordion-warning">
        <div class="panel-group" id="accordion-warning">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-warning" href="#collapse--4">
                Collapsible Group 1</a>
              </h4>
            </div>
            <div id="collapse--4" class="panel-collapse collapse in">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-warning" href="#collapse--5">
                Collapsible Group 2</a>
              </h4>
            </div>
            <div id="collapse--5" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-warning" href="#collapse--6">
                Collapsible Group 3</a>
              </h4>
            </div>
            <div id="collapse--6" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <h5>Danger</h5>
      <!-- Accordion Danger Background -->
      <div class="accordion-danger">
        <div class="panel-group" id="accordion-danger">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-danger" href="#collapse--7">
                Collapsible Group 1</a>
              </h4>
            </div>
            <div id="collapse--7" class="panel-collapse collapse in">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-danger" href="#collapse--8">
                Collapsible Group 2</a>
              </h4>
            </div>
            <div id="collapse--8" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion-danger" href="#collapse--9">
                Collapsible Group 3</a>
              </h4>
            </div>
            <div id="collapse--9" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet...</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div><!-- /.row -->
</div><!-- /.container -->