Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<table class="table table-bordered" id="overview-table">

        <div id="body-1">
        <tr data-toggle="collapse" data-target="#text-1" class="accordion-toggle collapsed">
          <td scope="row" class="accordion-label">
             <span class="glyphicon glyphicon-plus-sign">df</span>
             <h3>Heading 1</h3>
          </td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
        </tr>
        <tr>
            <td colspan="4" class="hiddenRow">
                <div class="accordian-body collapse clearfix" id="text-1">
                  <div class="collapse-feature-list">
                    <ul>
                      <li>Lorem</li>
                      <li>Lorem</li>
                    </ul>
                  </div>
                  <div class="collapse-link">
                    <a href="#">Link #3</a>
                    <a href="#">Link #2</a>
                    <a href="#">Link #1</a>
                  </div>
                </div>
            </td>
        </tr>
      </div>
    
            <div id="body-2">
        <tr data-toggle="collapse" data-target="#text-2" class="accordion-toggle collapsed" aria-expanded="false">
          <td scope="row" class="accordion-label">
             <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
             <h3>Heading 1</h3>
          </td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
        </tr>
        <tr>
            <td...

CSS

.hiddenRow {
   padding: 0 !important;
}

.accordion-label {
    position: relative;
	text-align: center;
}
.glyphicon {
	position: absolute;
	left: -9px;
	top: 45%;
	font-size: 125%;
	color: @brand-primary;
}

JavaScript

$('.collapse').on('show.bs.collapse', function () {
            $('.collapse.in').collapse('hide'); 
              
        });
        $('.collapsed').on('click', function() {
            $(".glyphicon").addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
            if( $(this).find(".glyphicon").hasClass('glyphicon-plus-sign')) {
                $(this).find(".glyphicon").addClass('glyphicon-minus-sign').removeClass('glyphiconplus-sign');
              
            }
        });