<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-sm-12"> <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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="more-less glyphicon glyphicon-chevron-up"></i> Search Parameters </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="row"> <div class="col-sm-6 search-label text-left"> <p>Product Family</p> <p>Sales Model</p> <p>Primary Offering</p> </div> <div class="col-sm-6 search-value text-right"> <span>Compact Track Loader</span> <span>259D</span> <span>259D AB1 5674</span> </div> </div> </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"> <i class="more-less glyphicon glyphicon-chevron-up"></i> Inventory Count </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="row"> <div class="col-sm-6 search-label text-left"> <p>Address</p> </div> <div class="col-sm-6 search-label text-left"> <p>Quantity</p> </div> <div class="col-sm-6 search-value"> <span class="address">Warehouse X</span> <span class="address">121 S State Street</span> <span>Chicago - 360001</span> </div> <div class="col-sm-6 search-value"> <span>27</span> </div> </div> </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" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="more-less glyphicon glyphicon-chevron-up"></i> In-Transit Machines </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <div class="row"> <div class="col-sm-6 search-label text-left"> <p>Estimated Delivery</p> </div> <div class="col-sm-6 search-label text-left"> <p>Product Status</p> </div> <div class="col-sm-6 search-value"> <span class="address">Warehouse X</span> <span class="address">121 S State Street</span> <span>Chicago - 360001</span> </div> <div class="col-sm-6 search-value"> <span>27</span> </div> </div> </div> </div> </div> <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" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <i class="more-less glyphicon glyphicon-chevron-up"></i> Machine Configurations </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <div class="row"> <div class="col-sm-12 search-value"> <span class="address">- 12 volt Electrical System</span> <span class="address">- 80 ampere Alternator</span> <span class="address">- Ignition Key Start/Stop Switch</span> <span class="address">- Lights: Gauge Backlighting, Two Rear Tail Lights, Two Rear Halogen Working Lights, Two Adjustable Front Halogen Lights, Dome Light</span> <span class="address">- 80 ampere Alternator</span> <span class="address">- Backup Alarm</span> <span>- Heavy Duty Battery, 880 CCA</span> </div> </div> </div> </div> </div> </div><!-- panel-group --> </div> </div>

/******************************* * Does not work properly if "in" is added after "collapse". * Get free snippets on bootpen.com *******************************/ .panel-group .panel { border-radius: 0; box-shadow: none; border: 0; } .panel-group .panel+.panel{ margin-top: 0; } .panel-body{ padding: 15px 20px; } .panel-body .search-label p{ margin-bottom: 15px; font-size: 14px; color: #000000; } .panel-body .search-value span{ margin-bottom: 15px; display: block; font-size: 14px; font-weight: 100; color: #000000; } .panel-body .search-value span.address{ margin-bottom: 0px; } .panel-default > .panel-heading { padding: 0; border-radius: 0; color: #212121; background-color: #d5d5d5; } .panel-title { font-size: 14px; } .panel-title > a { height: 52px; display: block; padding: 17px 20px 0; text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: 600; text-align: left; color: #000000; } .more-less { float: right; color: #212121; } body { background-color: #f6f6f6; }

function toggleIcon(e) { $(e.target) .prev('.panel-heading') .find(".more-less") .toggleClass('glyphicon-chevron-up glyphicon-chevron-down'); } $('.panel-group').on('hidden.bs.collapse', toggleIcon); $('.panel-group').on('shown.bs.collapse', toggleIcon);