<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> SERIES: Season Subscription (Fixed) - 3 Vouchers </h3> <span class="pull-right btn-click"> <i class="fa fa-chevron-circle-up"></i> </span> </div> <div class="clearfix"></div> <div class="panel-body"> <table class="table table-condensed"> <thead> <tr> <th>Column 1</th> <th>Message</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Content</td> </tr> <tr> <td>Data</td> <td>Content</td> </tr> <tr> <td>Data</td> <td>Content</td> </tr> </tbody> </table> </div> </div> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); .panel { margin-top: 25px; } .btn-click { margin-top: -27px; font-size: 26px; cursor: pointer; } .btn-click > .fa.fa-chevron-circle-up { color: rgba(249, 249, 249, .5); } .btn-white { color: #5e5e5e; background-color: #fff; border: 1px solid #e5e9ec; }

$(document).on('click', '.btn-click', 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('fa-chevron-circle-up').addClass('fa-chevron-circle-down'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up'); } })