11+ Bootstrap Accordion Examples

This post contains a total of 11+ Hand-Picked Bootstrap Accordion Examples with Source Code. All these Accordions are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Accordion Examples

1. By Umut Açıkgâz

Made by Umut Açıkgâz. Bootstrap 4 accordion with gradient background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.collapsible-link {
  width: 100%;
  position: relative;
  text-align: left;
}

.collapsible-link::before {
  content: "\f107";
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  display: block;
  font-family: "FontAwesome";
  font-size: 1.1rem;
}

.collapsible-link[aria-expanded="true"]::before {
  content: "\f106";
}

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
  background: #654ea3;
  background: -webkit-linear-gradient(to left, #654ea3, #eaafc8);
  background: linear-gradient(to left, #654ea3, #eaafc8);
  min-height: 100vh;
  padding-bottom: 5rem;
}
</style>
</head>
<body>
  <div class="container">

  <!-- For demo purpose -->
  <div class="row py-5">
    <div class="col-lg-9 mx-auto text-white text-center">
      <h1 class="display-4">Bootstrap 4 accordion</h1>
    </div>
  </div><!-- End -->

  <div class="row">
    <div class="col-lg-9 mx-auto">
      <!-- Accordion -->
      <div id="accordionExample" class="accordion shadow">

        <!-- Accordion item 1 -->
        <div class="card">
          <div id="headingOne" class="card-header bg-white shadow-sm border-0">
            <h2 class="mb-0">
              <button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                aria-controls="collapseOne"
                class="btn btn-link text-dark font-weight-bold text-uppercase collapsible-link">Collapsible Group Item
                #1</button>
            </h2>
          </div>
          <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
            <div class="card-body p-5">
              <p class="font-weight-light m-0">Some text</p>
            </div>
          </div>
        </div><!-- End -->

        <!-- Accordion item 2 -->
        <div class="card">
          <div id="headingTwo" class="card-header bg-white shadow-sm border-0">
            <h2 class="mb-0">
              <button type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                aria-controls="collapseTwo"
                class="btn btn-link collapsed text-dark font-weight-bold text-uppercase collapsible-link">Collapsible
                Group Item #2</button>
            </h2>
          </div>
          <div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">
            <div class="card-body p-5">
              <p class="font-weight-light m-0">Some text</p>
            </div>
          </div>
        </div><!-- End -->

        <!-- Accordion item 3 -->
        <div class="card">
          <div id="headingThree" class="card-header bg-white shadow-sm border-0">
            <h2 class="mb-0">
              <button type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                aria-controls="collapseThree"
                class="btn btn-link collapsed text-dark font-weight-bold text-uppercase collapsible-link">Collapsible
                Group Item #3</button>
            </h2>
          </div>
          <div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">
            <div class="card-body p-5">
              <p class="font-weight-light m-0">Some text</p>
            </div>
          </div>
        </div><!-- End -->

      </div><!-- End -->
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>

</body>
</html>

2. By Ufuk

Made by Ufuk. Simple Custom Bootstrap accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700'>
  
<style>
.container {
  padding: 50px;
  background-color: #c5cae9;
}
.accordion-button {
  background-color: #01579b;
  color: white;
  font: 20px Roboto, sans-serif;
}
.accordion-button:after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed):after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:hover {
  font: 21px Roboto, sans-serif;
}
.accordion-button:not(.collapsed) {
  background-color: #0277bd;
  color: white;
}
.accordion-item {
  background-color: #e1f5fe;
  font: 16px Roboto, sans-serif;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Accordion Item #1
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <strong>This is the first item's accordion body.</strong>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Accordion Item #2
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <strong>This is the second item's accordion body.</strong> 
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Accordion Item #3
          </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <strong>This is the third item's accordion body.</strong> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
</body>
</html>

3. By Zach

Made by Zach. Accordion Panels with plus – minus icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
@charset "UTF-8";
/**
 * Accordion - Styles
 */
#accordion .panel + .panel {
  margin-top: 0;
}
#accordion .panel-heading {
  background: #012345;
  border-radius: 0;
  padding: 0;
}
#accordion .panel-title {
  color: #fff;
  margin: 0;
}
#accordion .panel-title a {
  display: block;
  padding: 15px;
}
#accordion .panel-title a:hover, #accordion .panel-title a:focus {
  color: #fff;
  text-decoration: none;
}
#accordion .panel-title a:after {
  font-family: "Glyphicons Halflings";
  content: "βˆ’";
  float: right;
}
#accordion .panel-title a.collapsed:after {
  content: "+";
}
#accordion .panel-body {
  margin-bottom: 2rem;
}
</style>
</head>
<body>
  <div class="container">
  <div class="panel-group" role="tablist" id="accordion" aria-multiselectable="true">
    <div class="panel">
      <div class="panel-heading" role="tab">
        <h2 class="h3 panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="false">
          <span class="accordion-title-text">Item #1</span>
          </a>
        </h2>
      </div>
      <div class="collapse panel-collapse" role="tabpanel" aria-expanded="false">
        <div class="panel-body"> Enter text
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading" role="tab">
        <h2 class="h3 panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="false">
          <span class="accordion-title-text">Item #2</span>
          </a>
        </h2>
      </div>
      <div class="collapse panel-collapse" role="tabpanel" aria-expanded="false">
        <div class="panel-body">Enter Text
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading" role="tab">
        <h2 class="h3 panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="false">
          <span class="accordion-title-text">Item #3</span>
          </a>
        </h2>
      </div>
      <div class="collapse panel-collapse" role="tabpanel" aria-expanded="false">
        <div class="panel-body">Enter text 
        </div>
      </div>
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
      <script>
/**
 * Accordion - Dynamic Attributes
 **/
$('.panel').each(function (i) {
  $(this).find('.panel-heading').attr('id', 'heading-' + i);
  $(this).find('a').attr('href', '#collapse-' + i).attr('aria-controls', '#collapse-' + i);
  $(this).find('.panel-collapse').attr('id', 'collapse-' + i);
});
    </script>
</body>
</html>

4. By Khajan

Made by Khajan. Accordion With Open Close Arrows animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css'>
  
<style>
body {
  background: #232323;
}
.accordion{
  margin: 40px 0;
}
.accordion .item {
    border: none;
    margin-bottom: 50px;
    background: none;
}
.t-p{
  color: rgb(193 206 216);
  padding: 40px 30px 0px 30px;
}
.accordion .item .item-header h2 button.btn.btn-link {
    background: #333435;
    color: white;
    border-radius: 0px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 400;
    line-height: 2.5;
    text-decoration: none;
}
.accordion .item .item-header {
    border-bottom: none;
    background: transparent;
    padding: 0px;
    margin: 2px;
}

.accordion .item .item-header h2 button {
    color: white;
    font-size: 20px;
    padding: 15px;
    display: block;
    width: 100%;
    text-align: left;
}

.accordion .item .item-header h2 i {
    float: right;
    font-size: 30px;
    color: #eca300;
    background-color: black;
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

button.btn.btn-link.collapsed i {
    transform: rotate(0deg);
}

button.btn.btn-link i {
    transform: rotate(180deg);
    transition: 0.5s;
}
</style>
</head>
<body>
  <div class="container">
<div class="accordion" id="accordionExample">
  <div class="item">
     <div class="item-header" id="headingOne">
        <h2 class="mb-0">
           <button class="btn btn-link" type="button" data-toggle="collapse"
              data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           Item #1
           <i class="fa fa-angle-down"></i>
           </button>
        </h2>
     </div>
     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
        data-parent="#accordionExample">
        <div class="t-p">
            text
        </div>
     </div>
  </div>
  <div class="item">
     <div class="item-header" id="headingTwo">
        <h2 class="mb-0">
           <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
              data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
           Item #2
           <i class="fa fa-angle-down"></i>
           </button>
        </h2>
     </div>
     <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
        data-parent="#accordionExample">
        <div class="t-p">
            text
        </div>
     </div>
  </div>
  <div class="item">
     <div class="item-header" id="headingThree">
        <h2 class="mb-0">
           <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
              data-target="#collapseThree" aria-expanded="false"
              aria-controls="collapseThree">
           Item #3
           <i class="fa fa-angle-down"></i>
           </button>
        </h2>
     </div>
     <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
        data-parent="#accordionExample">
        <div class="t-p">
            text
        </div>
     </div>
  </div>
  <div class="item">
     <div class="item-header" id="headingFour">
        <h2 class="mb-0">
           <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
              data-target="#collapseFour" aria-expanded="false"
              aria-controls="collapseFour">
           Item #4
           <i class="fa fa-angle-down"></i>
           </button>
        </h2>
     </div>
     <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
        data-parent="#accordionExample">
        <div class="t-p">
            text
        </div>
     </div>
  </div>
</div>
</div>  
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'></script>

</body>
</html>

5. By Luis Badiali

Made by Luis Badiali. Bootstrap accordion with font awesome icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
<style>
@charset "UTF-8";
body {
  font-family: var(--font-family-monospace);
  background-image: linear-gradient(to bottom, #a18cd1 0%, #fbc2eb 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.accordion {
  width: 100%;
}
@media (min-width: 991px) {
  .accordion {
    width: 540px;
  }
}
.accordion .card-header {
  background-color: var(--purple);
}
.accordion .btn-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.125rem 1.5rem;
}
.accordion .btn-link:hover, .accordion .btn-link:focus {
  text-decoration: none;
}
.accordion .btn-link i {
  transition: all 0.2s ease;
}
.accordion .btn-link i.rotated {
  transform: rotate(-180deg);
}

/*
 * Luis Badiali
 * badiali.es
 * Please leave your like | Por favor deja tu like
 */
.love {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: fixed;
  z-index: 1;
  bottom: 1rem;
  left: 1rem;
  padding: 1em;
  font-family: monospace, sans-serif;
  font-size: 0.875rem;
  line-height: 1em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 5px;
}
.love::after {
  content: "❀️";
  margin-left: 10px;
  -webkit-animation: beat 0.5s alternate infinite ease-in;
          animation: beat 0.5s alternate infinite ease-in;
}

@-webkit-keyframes beat {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
</style>
</head>
<body>
  <div class="container d-flex flex-column align-items-center">
  <h2 class="text-white text-center mt-5 mb-4">Bootstrap accordion</h2>
  <p class="mb-5 text-center text-white">Accordion example using the card component <a class="text-white bg-dark font-weight-bold" href="https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example">bootstrap</a></p>
  <div class="accordion mb-5" id="accordionExample">
    <div class="card border-0 rounded-0">
      <div class="card-header p-0" id="heading_1">
        <h2 class="mb-0 border-bottom">
          <button class="btn btn-link text-white collapsed" type="button" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false" aria-controls="collapse_1">Collapsible Group Item #1<i class="fa fa-chevron-down"></i>
          </button>
        </h2>
      </div>
      <div class="collapse bg-light" id="collapse_1" aria-labelledby="heading_1" data-parent="#accordionExample">
        <div class="card-body text-dark">Lorem</div>
      </div>
    </div>
    <div class="card border-0 rounded-0">
      <div class="card-header p-0" id="heading_2">
        <h2 class="mb-0 border-bottom">
          <button class="btn btn-link text-white collapsed" type="button" data-toggle="collapse" data-target="#collapse_2" aria-expanded="false" aria-controls="collapse_2">Collapsible Group Item #2<i class="fa fa-chevron-down"></i>
          </button>
        </h2>
      </div>
      <div class="collapse bg-light" id="collapse_2" aria-labelledby="heading_2" data-parent="#accordionExample">
        <div class="card-body text-dark">Lorem</div>
      </div>
    </div>
    <div class="card border-0 rounded-0">
      <div class="card-header p-0" id="heading_3">
        <h2 class="mb-0 border-bottom">
          <button class="btn btn-link text-white collapsed" type="button" data-toggle="collapse" data-target="#collapse_3" aria-expanded="false" aria-controls="collapse_3">Collapsible Group Item #3<i class="fa fa-chevron-down"></i>
          </button>
        </h2>
      </div>
      <div class="collapse bg-light" id="collapse_3" aria-labelledby="heading_3" data-parent="#accordionExample">
        <div class="card-body text-dark">Lorem</div>
      </div>
    </div>
  </div>
</div>
<div class="love">Leave your</div>
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'></script>
      <script>
$('.collapse').each(function () {
  if (!$(this).prev().find('.btn').hasClass('collapsed')) {
    $(this).prev().find('.btn > i').addClass('rotated');
  }
  $(this).on('show.bs.collapse', function () {
    $(this).prev().find('.btn > i').addClass('rotated');
  }).on('hide.bs.collapse', function () {
    $(this).prev().find('.btn > i').removeClass('rotated');
  });
});
    </script>
</body>
</html>

6. By Imtiyaz

Made by Imtiyaz. Bootstrap Accordion Using HTML, CSS, JS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #eee;
}
.container {
  padding: 35px;
}
.head {
  margin: 15px 0;
}
.accordion {
  background-color: #f5faff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  margin-top: 2px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active,
.accordion:hover {
  background-color: #e0edff;
}
.accordion:after {
  content: "\002B";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}
.panel {
  padding: 0 18px;
  background: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.activeP {
  padding: 18px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="head">
    <h2>Accordion</h2>
    <p>Click on the buttons to open the collapsible content.</p>
  </div>
  <button class="accordion">Section 1</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
      ea commodo consequat.</p>
  </div>
  <button class="accordion">Section 2</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
      ea commodo consequat.</p>
  </div>

  <button class="accordion">Section 3</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
      ea commodo consequat.</p>
  </div>
</div>
      <script>
var accordions = document.querySelectorAll(".accordion");
accordions.forEach((acc) =>
acc.addEventListener("click", () => {
  acc.classList.toggle("active");
  var panel = acc.nextElementSibling;
  panel.classList.toggle("activeP");
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
}));
    </script>
</body>
</html>

7. By Niv

Made by Niv. Bootstrap 4 Accordion with Rotating icon animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css'>
  
<style>
/**
* Responsive breakpoints
*/
/*
 * VARIABLES
**/
.comp-information .table th, b {
  font-weight: 600;
}

strong {
  font-weight: 700;
}

/**
* Responsive breakpoints
*/
.comp-information {
  width: 100%;
}
.comp-information a {
  color: #007fad;
  text-decoration: underline;
}
.comp-information a:hover, .comp-information a:focus {
  color: #006589;
}
.comp-information .information__accordion .card {
  border-radius: 4px;
  margin-bottom: 20px;
}
.comp-information .information__accordion .card p {
  margin-bottom: 0;
}
.comp-information .information__accordion .card p + p {
  margin-top: 1rem;
}
.comp-information .information__accordion .card-header {
  padding: 0;
  border-radius: 0;
}
.comp-information .information__accordion .card-header .btn {
  position: relative;
  width: 100%;
  text-align: inherit;
  justify-content: flex-start;
  font-size: 22px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-right: 55px;
  background-color: #f3f3f3;
  border: none;
}
.comp-information .information__accordion .card-header .btn::after {
  position: absolute;
  content: "";
  top: 0;
  right: 16px;
  width: 22px;
  height: 100%;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="15"> <path fill="rgb(0, 127, 173)" fill-rule="evenodd" d="M12-.001l12 11.797-3.259 3.203L12 6.406l-8.741 8.593L0 11.796 12-.001z"/> </svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition: transform 0.3s ease;
  height: 26px;
  top: 27%;
}
.comp-information .information__accordion .card-header .btn.collapsed:after {
  transform: rotate(180deg);
}
@media (max-width: 767.98px) {
  .comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 768px) {
  .comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.comp-information .information__accordion .card-body {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fbfbfb;
}
@media (max-width: 767.98px) {
  .comp-information .information__accordion .card-body {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 768px) {
  .comp-information .information__accordion .card-body {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .comp-information .information__accordion .card-body {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.comp-information .donation--content {
  padding-top: 6px;
  padding-bottom: 8px;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
@media (min-width: 768px) {
  .comp-information .donation--content {
    margin-bottom: 8px;
  }
}
@media (min-width: 992px) {
  .comp-information .donation--content {
    padding: 10px 15px 13px;
    margin-bottom: 30px;
  }
}
.comp-information .table {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .comp-information .table {
    max-width: 720px;
  }
}
.comp-information .table th, .comp-information .table td {
  border: 0;
  padding: 10px 0;
  word-break: break-word;
}
@media (max-width: 767.98px) {
  .comp-information .table th, .comp-information .table td {
    display: block;
    padding: 0;
  }
}
.comp-information .table th {
  color: #444444;
}
@media (max-width: 767.98px) {
  .comp-information .table th {
    padding-top: 20px;
  }
}
@media (min-width: 768px) {
  .comp-information .table th {
    width: 30%;
    padding-right: 15px;
  }
}
@media (min-width: 992px) {
  .comp-information .table th {
    padding-right: 55px;
  }
}
.comp-information .box__blue--border {
  padding: 18px 30px 23px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 4px 0 0 0 #007fad inset, 0 3px 7px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
@media (max-width: 991.98px) {
  .comp-information .box__blue--border {
    padding: 11px 15px 15px;
  }
}
.comp-information .box__blue--border + p, .comp-information .box__blue--border + h2, .comp-information .box__blue--border + h3, .comp-information .box__blue--border + h4, .comp-information .box__blue--border + h5, .comp-information .box__blue--border + h6, .comp-information .box__blue--border + div:not(.box__blue--border) {
  padding-top: 1rem;
}

.catalog__info {
  line-height: 1;
}
.catalog__info a {
  color: #007fad;
  text-decoration: underline;
}
.catalog__info a:hover, .catalog__info a:focus {
  color: #006589;
}
@media (min-width: 1200px) {
  .catalog__info {
    padding-top: 15px;
    padding-bottom: 20px;
  }
}
.catalog__info .icon {
  font-size: 18px;
  margin-right: 6px;
}

.wrapper {
  display: flex;
  max-width: 50rem;
  min-height: 100vh;
  padding: 1.5625rem 0.9375rem;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
  <div class="wrapper">
  
  <!-- Acordion  -->
  <div class="comp-information">
    <div class="information__accordion js-information" id="informationAccordion">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <!-- NOTE: For change the arrow position toggle class .collapsed ( for collapsed add class .collapsed | for expanded remove class .collapsed ) -->
            <button type="button" class="btn" data-toggle="collapse" data-target="#collapse-details"
                    aria-expanded="true" aria-controls="collapse-details" title="Lorem Ipsum">
                <span class="js-information_tooltip" data-toggle="tooltip" data-placement="bottom">Lorem Ipsum</span> </button>
          </h5>
        </div>

        <!-- NOTE: For show the collapses content add class .show -->
        <div class="collapse" id="collapse-details" data-parent="">
          <div class="card-body">
            <div class="donation--content">
              <b class="d-block">Lorem ipsum dolor sit amet:</b>
                Eum id clita dolore, pri vidisse appareat postulant an. Est at nobis conclusionemque
              </div>

            <table class="table">
              <tbody>
              <tr>
                <th scope="row">audire</th>
                <td>suavitate interpretaris et sea</td>
              </tr>
              <tr>
                <th scope="row">Lorem ipsum</th>
                <td><a href="#"> in sit nulla mandamus</a></td>
              </tr>
              <tr>
                <th scope="row">Eum </th>
                <td><a href="#"> duo sumo nullam doctus et</a></td>
              </tr>
              <tr>
                <th scope="row">Elit</th>
                <td><a href="#">ca. 1940-1945</a></td>
              </tr>
              <tr>
                <th scope="row">Libris apeirian</th>
                <td>Tvix altera definiebas an, ut amet singulis vim. Tale discere et vix, eos ne erant latine lucilius. Te mel mentitum salutatus</td>
              </tr>
              <tr>
                <th scope="row">falli</th>
                <td>Niv Dam</td>
              </tr>
              <tr>
                <th scope="row">Capeirian</th>
                <td><a href="#"> Ut sed iudicabit deterruisset</a></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">
            <!-- NOTE: For change the arrow position toggle class .collapsed ( for collapsed add class .collapsed | for expanded remove class .collapsed ) -->
            <button type="button" class="btn js-information_tooltip collapsed" data-toggle="collapse"
                    data-target="#accessRights-collapse" aria-expanded="false" aria-controls="accessRights-collapse" title="At errem omnes">
                <span class="js-information_tooltip" data-toggle="tooltip" data-placement="bottom">At errem omnes</span></button>
          </h5>
        </div>
        <!-- NOTE: For show the collapses content add class .show -->
        <div class="collapse" id="accessRights-collapse" data-parent="">
          <div class="card-body">
            <p class="mb-3"> <b>Esse invenire dissentias ad his:</b> </p>

            <div class="box__blue--border">
              <p>Ne ignota quodsi copiosae usu</p>
            </div>

            <p class="mb-3"> <b>Dolor sit amet:</b> </p>

            <div class="box__blue--border">
              <p>Lorem ipsum dolor sit amet, duo ex dicit elaboraret repudiandae, graeco tibique vis eu? In per fabulas alienum, autem atqui definitiones est ut. Ut minimum adipisci dissentiet ius, phaedrum quaestio antiopam ex sit. Ullum postea conclusionemque ex his, eu nam autem voluptua. Id nam wisi eligend</p>
              <p>
                Lorem ipsum dolor sit amet, in vel tation platonem. Qui ex veri debitis voluptaria, diam aperiam in nec, sed te probatus corrumpit. Ludus ornatus cum at, te admodum invenire pri. Oratio equidem offendit eu vis, sed modus elaboraret ex.</p>
              <p> Lorem ipsum dolor sit amet, ex populo vidisse feugiat mel, <br> eos eius vocibus no. An sea sanctus oportere, melius omnium eum at. Possim labitur principes et eum.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
      <script>
// Accessible  -  Define values for keycodes
function keyCodes() {
  this.tab = 9;
  this.untab = 16;
  this.enter = 13;
  this.escape = 27;
  this.space = 32;
  this.end = 35;
  this.home = 36;
  this.left = 37;
  this.up = 38;
  this.right = 39;
  this.down = 40;
}


// Accessible - bootstrap accordion
function accessible_bootstrap_accordion() {
  var keys = new keyCodes();

  // Tabs nav links
  $(document).on('keydown', '.comp-information [data-toggle="collapse"]', function (e) {
    var currentBtn = $(this),
    currentCardWrapper = currentBtn.parents('.card');


    function next() {
      $(currentCardWrapper.next().find('[data-toggle="collapse"]').focus().attr('data-target')).collapse('show');
    }
    function prev() {
      $(currentCardWrapper.prev().find('[data-toggle="collapse"]').focus().attr('data-target')).collapse('show');
    }


    if (e.which === keys.down) {
      e.preventDefault(); // Disable arrow key scrolling
      $(currentBtn.attr('data-target')).collapse('hide');

      if (currentCardWrapper.next('.card').length) {
        next();
      } else {
        prev();
      }

    } else if (e.which === keys.up) {
      e.preventDefault(); // Disable arrow key scrolling
      $(currentBtn.attr('data-target')).collapse('hide');

      if (currentCardWrapper.prev('.card').length) {
        prev();
      } else {
        next();
      }
    }
  });
}


// document.ready
jQuery(document).ready(function ($) {
  accessible_bootstrap_accordion();
});
    </script>
</body>
</html>

8. By Asrul Nur Rahim

Made by Asrul Nur Rahim. Accordion with Vertical Step Inside. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
  
<style>
body{
  padding:20px;
  background-color: #ecf0f1;
}

/*Vertical Steps*/
.inside-body{
  padding:25px;
}
.list-group.vertical-steps .list-group-item{
  border:none;
  border-left:3px solid #0052c2;
  box-sizing:border-box;
  border-radius:0;
  counter-increment: step-counter;
  padding-left:20px;
  padding-right:0px;
  padding-bottom:20px;
  padding-top:0px;
}
.list-group.vertical-steps .list-group-item.active{
  background-color:transparent;
  color:inherit;
}
.list-group.vertical-steps .list-group-item:last-child{
  border-left:3px solid transparent;
  padding-bottom:0;
}
.list-group.vertical-steps .list-group-item::before {
  border-radius: 50%;
  background-color:#0052c2;
  color:#fff;
  content: counter(step-counter);
  display:inline-block;
  float:left;
  height:25px;
  line-height:25px;
  margin-left:-35px;
  text-align:center;
  width:25px;
}
.list-group.vertical-steps .list-group-item span,
.list-group.vertical-steps .list-group-item a{
  display:block;
  overflow:hidden;
  padding-top:2px;
}
/* End of Vertical Step */

#how-to .panel-group .panel{
  border-radius:0px;
  border: 0px;
}
#how-to .panel-group{
  margin:0px;
}
#how-to .panel-heading{
  padding:0px !important;
  border-radius: 0px;
}
#how-to .parent a{
  display: block;
  text-decoration: none;
  padding:25px;
}
#how-to .child a{
  display: block;
  text-decoration: none;
  padding:25px;
}
#how-to .parent{
  background-color: #fff !important;
}
#how-to .child{
  background-color: #f2f2f2 !important;
}
#how-to .panel-body{
  border: none;
}
#how-to .panel-body{
  padding:0px;
}
#how-to .panel-group .panel+.panel{
  margin:0px;
}
#how-to .panel-group .parent{
  border-bottom: 1px solid #ecf0f1;
}
#how-to .panel-group .child{
  border-bottom: 1px solid #FDFDFD;
}
#superaccordion{
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  right:10px;
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  font-size:14pt;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
  color:#333;
}
.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.parent a:after{
  content: "";
  position: relative;
  top: -15px;
  right:10px;
  display: inline-block;
  line-height: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
  color:#333;
}
</style>
</head>
<body>
  <section id="how-to">
        <!-- Super Accordion -->
      <div class="panel-group" id="superaccordion">
        <!-- Accordion 1 -->
        <div class="panel">
          <div class="panel-heading parent">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#superaccordion" href="#collapse1" aria-expanded="false">
                <img src="https://s3-ap-southeast-1.amazonaws.com/media.go-jek.com/gopay_platformicon/bca.jpg" class="img-responsive" width="100px">
              </a>
          </div>
          <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
              <div class="panel-group" id="accordion1">
                <div class="panel">
                  <div class="panel-heading child">
                    <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse1A" aria-expanded="false">ATM BCA
                      </a>
                    </h4>
                  </div>
                  <div id="collapse1A" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="inside-body">
                        <ol class="list-group vertical-steps">
                          <li class="list-group-item"><span>Lorem</span></li>
                          <li class="list-group-item"><span>Lorem</span</li>
                          <li class="list-group-item"><span>Lorem</span></li>
                          <li class="list-group-item"><span>Lorem</span></li>
                          <li class="list-group-item"><span>Lorem</span></li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="panel">
                  <div class="panel-heading child">
                    <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse1B" aria-expanded="false">Collapsible Group Item #3.2
                      </a>
                    </h4>
                  </div>
                  <div id="collapse1B" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="inside-body">
                      Konten
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End of Accordion 1 -->
        <!-- Accordion 2 -->
        <div class="panel">
          <div class="panel-heading parent">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#superaccordion" href="#collapse2" aria-expanded="false">
                <img src="https://s3-ap-southeast-1.amazonaws.com/media.go-jek.com/gopay_platformicon/mandiri.jpg" class="img-responsive" width="100px">
              </a>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
              <div class="panel-group" id="accordion2">
                <div class="panel">
                  <div class="panel-heading child">
                    <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse2A" aria-expanded="false">Collapsible Group Item #3.1
                      </a>
                    </h4>
                  </div>
                  <div id="collapse2A" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="inside-body">
                        <ol class="list-group vertical-steps">
                          <li class="list-group-item"><span>Lorem</span></li>
                          <li class="list-group-item"><span>Lorem</span</li>
                          <li class="list-group-item"><span>Lorem</span></li>
                          <li class="list-group-item"><span>Lorem</span></li>
                          <li class="list-group-item"><span>Lorem</span></li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="panel">
                  <div class="panel-heading child">
                    <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse2B" aria-expanded="false">Collapsible Group Item #3.2
                      </a>
                    </h4>
                  </div>
                  <div id="collapse2B" class="panel-collapse collapse">
                    <div class="panel-body">
                      <div class="inside-body">
                      Konten
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End of Accordion 2 -->
      </div>
      <!-- End of Super Accordion -->
    </section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
</body>
</html>

9. By Ayesha S

Made by Ayesha S. Accordion with simple slide animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
body
{
  background-color: #e3e3e3;
}

#courses
{
  margin: 100px 50px;
}

.panel-title
{
    color: #fff;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #1c2f3c;
}

.panel-title > a:hover,
.panel-title > a:focus,
.panel-title > a:active
{
   text-decoration: none;
}

.panel-heading
{
  background-color: #1c2f3c !important;
  padding-top: 20px;
  padding-bottom: 20px;
}

.panel-default
{
  background-color: #1c2f3c !important;
}

.panel-group .panel
{
  border-radius: 0 !important;
  box-shadow: none;
  border: 1px solid #1c2f3c;
}

#panel-body
{
  background-color: #fff !important;
}

.table > tbody tr td
{
  text-align: center;
}
</style>
</head>
<body>
  <body>
  <div id="courses" class="container-fluid">
      <div class="row">
        <div class="col-sm-4">
          <div class="panel-group" id="accordion">
            <div role="tabpanel">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                      TEXT
                    </a>
                  </h4>
                 </div>
                <div class="panel-collapse collapse" id="collapseOne">
                  <div id="panel-body">
                    <table class="table">
                      <tr>
                        <td>Standard 1</td>
                      </tr>
                      <tr>
                        <td>Standard 2</td>
                      </tr>
                      <tr>
                        <td>Standard 3</td>
                      </tr>
                      <tr>
                        <td>Standard 4</td>
                      </tr>
                      <tr>
                        <td>Standard 5</td>
                      </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
       </div>
       
       <div class="col-sm-4">
         <div class="panel-group" id="accordion">
           <div role="tabpanel">
             <div class="panel panel-default">
               <div class="panel-heading">
                 <h4 class="panel-title">
                   <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    TEXT
                   </a>
                 </h4>
                </div>
               <div class="panel-collapse collapse" id="collapseTwo">
                 <div id="panel-body">
                   <table class="table">
                     <tr>
                       <td>Standard 1</td>
                    </tr>
                    <tr>
                      <td>Standard 2</td>
                    </tr>
                    <tr>
                      <td>Standard 3</td>
                    </tr>
                    <tr>
                      <td>Standard 4</td>
                    </tr>
                    <tr>
                      <td>Standard 5</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="panel-group" id="accordion">
          <div role="tabpanel">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    TEXT
                  </a>
                </h4>
              </div>
              <div class="panel-collapse collapse" id="collapseThree">
                <div id="panel-body">
                  <table class="table">
                    <tr>
                      <td>Standard 1</td>
                    </tr>
                    <tr>
                      <td>Standard 2</td>
                    </tr>
                    <tr>
                      <td>Standard 3</td>
                    </tr>
                    <tr>
                      <td>Standard 4</td>
                    </tr>
                    <tr>
                      <td>Standard 5</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
       
     </div>
    </div>
</body>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

10. By Rahul CV

Made by Rahul CV. Accordion Example With Plus/Minus Signs. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />

  
<style>
/* =============================================================
   GENERAL STYLES
 ============================================================ */
body {
    font-family: 'Open Sans', sans-serif;
   
}
.pad-top {
    padding-top:40px;
}


.panel > .panel-heading {
position: relative;
padding: 15px;
}
.panel-title > a.collapsed:after {
content: '+';
position: absolute;
right: 24px;
}

.panel-title > a:after {
 content: '-';
position: absolute;
right: 24px;

}
</style>
</head>
<body>
</head>
<body>
    <div class="container">
        <div class="row text-center pad-top ">
            <div class="col-md-12">
                <h3>Bootstrap Accordion Example With Plus/Minus Signs</h3>
            </div>
        </div>
        
        <div class="container">
            <div class="row  pad-top">
                <div class="col-md-4 col-md-offset-4">
                  <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" class="collapsed">
                                        Vivamus sagittis egestas mauris
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse1" class="panel-collapse collapse" >
                                <div class="panel-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam. Nulla eget condimentum mauris, eget tincidunt est.</p>
                                </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" class="collapsed">
                                       Cras viverra ac orci ac
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse2" class="panel-collapse collapse" >
                                <div class="panel-body">
                                    <p>
                                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam. Nulla eget condimentum mauris, eget tincidunt est.
                                    </p>
                                </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" class="collapsed">
                                        Sed Diam Nonummy Euismod
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse3" class="panel-collapse collapse" s>
                                <div class="panel-body">
                                    <p>
                                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam. Nulla eget condimentum mauris, eget tincidunt est.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
             

              
            </div>
        </div>
    </div>
<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="assets/plugins/bootstrap.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

</body>
</html>

11. By Aashima Jain

Made by Aashima Jain. Rotating icon bootstrap accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body{
            margin-top: 50px !important;
        }
        a:hover, a:focus{
            text-decoration: none !important;
            outline: none !important;
            
        }
        .panel-group .panel{
            background-color: #fff;
            border:none;
            box-shadow:none;
            border-radius: 10px;
            margin-bottom:11px;
        }
        .panel .panel-heading{
            padding: 0;
            border-radius:10px;
            border: none;
        }
        .panel-heading a{
            color:#fff !important;
            display: block;
            border:none;
            padding:20px 35px 20px;
            font-size: 20px;
            background-color:rgb(236, 87, 102);
            font-weight:600;
            position: relative;
            color:#fff;
            box-shadow:none;
            transition:all 0.1s ease 0;
        }
        .panel-heading a:after, .panel-heading a.collapsed:after{
            content: "\f068";
            font-family: fontawesome;
            text-align: center;
            position: absolute;
            left:-20px;
            top: 10px;
            color:#fff;
            background-color:rgb(236, 87, 102);
            border: 5px solid #fff;
            font-size: 15px;
            width: 40px;
            height:40px;
            line-height: 30px;
            border-radius: 50%;
            transition:all 0.3s ease 0s;
        }
        .panel-heading:hover a:after,
        .panel-heading:hover a.collapsed:after{
            transform:rotate(360deg);
        }
        .panel-heading a.collapsed:after{
            content: "\f067";
        }
        #accordion .panel-body{
            background-color:#Fff;
            color:#8C8C8C;
            line-height: 25px;
            padding: 10px 25px 20px 35px ;
            border-top:none;
            font-size:14px;
            position: relative;
        }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <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 class="first" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Heading-one
                                <span> </span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <p>Lorem , iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehic</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" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Heading-Two
                                <span> </span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <p>Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.</p>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed last" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Heading-Three
                                <span> </span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            <p>Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script type="text/javascript"  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

12. By Auginator

Made by Auginator. Simple Bootstrap Accordion Interface. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'>
  
<style>
ul.collapsible-doodads {
  list-style:none;
  border-top:4px solid #fff;
  border-left:4px solid #fff;
  border-right:4px solid #fff;
  margin:0;
  position:relative;
}

ul.collapsible-doodads li {
  border-bottom:4px solid #fff;
  background:#f1f1f1;
  position:relative;
  padding:1em;
}

ul.collapsible-doodads li.active {
  background:#fdfdfd;
}
ul.collapsible-doodads li p {
  transition: height 1s;
  display:none;
}

ul.collapsible-doodads li.active p {
  display:block;
}

ul.collapsible-doodads li div.gui-button {
  font-size:36px;
  float:left;
  display:block;
  width:32px;
  height:32px;
  background-image: url(https://s.cdpn.io/44303/ui-buttons-sm.png);
  margin-top:4px;
  cursor:pointer;
}

ul.collapsible-doodads li.active div.gui-button {
  background-position:-32px;
  margin-top:30px;
}

ul.collapsible-doodads li div.content {
  display:block;
  float:left;
  margin-left:18px;
  width:80%;
}
</style>
</head>
<body>
  <div class='container'>
  <div class='row'>
    <div class='col-lg-12'>
      <ul class='collapsible-doodads'>
        <li class='active clearfix'>
          <div class='gui-button'></div>
          <div class='content'>
            <h5>Lorem ipsum dolor sit amet</h5>
            <p>Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.</p>
          </div>
        </li>
        <li class='clearfix'>
          <div class='gui-button'></div>
          <div class='content'>
            <h5>Lorem ipsum dolor sit amet</h5>
            <p>Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.</p>
          </div>
        </li>
        <li class='clearfix'>
          <div class='gui-button'></div>
          <div class='content'>
            <h5>Lorem ipsum dolor sit amet</h5>
            <p>Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.</p>
          </div>
        </li>
        <li class='clearfix'>
          <div class='gui-button'></div>
          <div class='content'>
            <h5>Lorem ipsum dolor sit amet</h5>
            <p>Consectetur adipisicing elit. Esse facere sint eum voluptatem reiciendis totam doloribus asperiores doloremque atque dolorem saepe officia cupiditate? Veniam ab in libero non perferendis dolore.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {
  var _collapseList = $('ul.collapsible-doodads');
  $("ul.collapsible-doodads li div.gui-button").on('click', function (e) {
    $(_collapseList).children('li.active').removeClass('active');
    $(this).parent('li').addClass('active');
  });
});
    </script>
</body>
</html>