<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br/> <div class="container"> <div class="row"> <div class="col-md-9 col-md-offset-2"> <div class="panel panel-info"> <div class="panel-heading"> <h6 class="panel-title"></h6> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body" data-toggle="collapse"> <table> <tr> <td></td> <td> <table> <tr> <td align="right">Overtime detail is current as of:  </td> <td> <span id="lblOTDate" class="label label-danger">5/14/2016</span> </td> </tr> <tr> <td align="right">Production is current as of:  </td> <td> <span id="lblLoanDate" class="label label-danger">5/17/2016</span> </td> </tr> <tr> <td align="right">Commissions cutoff date is:  </td> <td> <span id="lblCommCutoff" class="label label-danger">6/8/2016</span> </td> </tr> </table> </td> <td> <br /> <div class="row"> <div class="col-md-11 col-md-offset-1"> <div id="spnWarningMSG" class="alert alert-danger"> <b>WARNING: </b>CARRYOVER/PRODUCTION NOT FINAL FOR <span id="lblCommMonths">MAY</span> </div> </div> </div> </td> </tr> </table> </div> </div> </div> </div> </div>

.clickable{ cursor: pointer; } .panel-heading span { margin-top: -14px; font-size: 8px; background-color:white; } .panel-heading { padding: 1px 2px; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; background-color:white; } .panel-title {color:black; background-color:white; } .panel-body {padding-top: 8px; padding-bottom: 8px} .alert { padding: 4px; margin-bottom: 2px; }

$(document).on('click', '.panel-heading span.clickable', function(e){ var $this = $(this); if(!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); } })