Bootstrap List Group Accordion

In this example below you will see how to do a Bootstrap List Group Accordion with some HTML / CSS and Javascript

Bootstrap's accordion (using data-parent) has a dependency on .panel by default. This overrides that with an attached event

Thumbnail
This awesome code was written by jwynveen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jwynveen ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap List Group Accordion</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1>Bootstrap List Group Accordion</h1>
  <ul class="list-group" id="list-group-accordion">
    <li class="list-group-item">
      <h2 class="list-group-heading" data-toggle="collapse" data-target="#item-one" data-parent="#list-group-accordion">Item One<i class="fa fa-chevron-right pull-right"></i></h2>
      <div id="item-one" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec pellentesque dui. Nullam purus metus, hendrerit at purus eleifend, iaculis tempus massa. Nulla vel egestas elit, eget rhoncus est. Cras mattis purus sit amet elit rutrum imperdiet. Fusce lobortis varius risus, eu iaculis elit luctus nec. Nam at varius mauris.</div>
    </li>
    <li class="list-group-item">
      <h2 class="list-group-heading" data-toggle="collapse" data-target="#item-two" data-parent="#list-group-accordion">Item Two<i class="fa fa-chevron-right pull-right"></i></h2>
      <div id="item-two" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec pellentesque dui. Nullam purus metus, hendrerit at purus eleifend, iaculis tempus massa. Nulla vel egestas elit, eget rhoncus est. Cras mattis purus sit amet elit rutrum imperdiet. Fusce lobortis varius risus, eu iaculis elit luctus nec. Nam at varius mauris.</div>
    </li>
    <li class="list-group-item">
      <h2 class="list-group-heading" data-toggle="collapse" data-target="#item-three" data-parent="#list-group-accordion">Item Three<i class="fa fa-chevron-right pull-right"></i></h2>
      <div id="item-three" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec pellentesque dui. Nullam purus metus, hendrerit at purus eleifend, iaculis tempus massa. Nulla vel egestas elit, eget rhoncus est. Cras mattis purus sit amet elit rutrum imperdiet. Fusce lobortis varius risus, eu iaculis elit luctus nec. Nam at varius mauris.</div>
    </li>
  </ul>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jwynveen/bootstrap-list-group-accordion-WQrGVg */
[data-toggle="collapse"] {
  cursor: pointer;
}
[data-toggle="collapse"][aria-expanded="true"] .fa-chevron-right:before {
  content: "\f078";
}


/*Downloaded from https://www.codeseek.co/jwynveen/bootstrap-list-group-accordion-WQrGVg */
$(function() {
  $('.collapse').on('show.bs.collapse', function() {
    var toggle = $('[data-target="#' + this.id + '"]');
    if (toggle) {
      var parent = toggle.attr('data-parent');
      if (parent) {
        $(parent).find('.collapse.in').collapse('hide');
      }
    }
  });
})

Comments