<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-default"> <div class="panel-heading"> <div> <h3 class="panel-title"> http://example.com </h3> <h4 class="panel-subtitle"> <b>3</b> of <b>3</b> services running... </h4> </div> <div class="panel-header-right"> <a class="btn btn-success"><i class="fa fa-play"></i> Start</a> <a class="btn btn-danger"><i class="fa fa-stop"></i> Stop</a> <a class="btn btn-warning"><i class="fa fa-repeat"></i> Restart</a> <span class="btn-click"> <i class="fa fa-chevron-circle-up"></i> </span> </div> </div> <div class="clearfix"></div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <h1 class="primary-title">Domain 'http://example.com/'</h1> <h2 class="secondary-title"><b>3</b> of <b>3</b> services running...</h2> </div> </div> <table class="table table-condensed"> <thead> <tr> <th>Services</th> <th>Status</th> <th></th> </tr> </thead> <tbody> <tr> <td>Apache</td> <td>Running.... (pid 45625)</td> <td> <a class="btn btn-success"><i class="fa fa-play"></i> Start</a> <a class="btn btn-danger"><i class="fa fa-stop"></i> Stop</a> <a class="btn btn-warning"><i class="fa fa-repeat"></i> Restart</a> </td> </tr> <tr> <td>Mysql</td> <td>Running.... (pid 87623)</td> <td> <a class="btn btn-success"><i class="fa fa-play"></i> Start</a> <a class="btn btn-danger"><i class="fa fa-stop"></i> Stop</a> <a class="btn btn-warning"><i class="fa fa-repeat"></i> Restart</a> </td> </tr> <tr> <td>Redis</td> <td>Running.... (pid 78496)</td> <td> <a class="btn btn-success"><i class="fa fa-play"></i> Start</a> <a class="btn btn-danger"><i class="fa fa-stop"></i> Stop</a> <a class="btn btn-warning"><i class="fa fa-repeat"></i> Restart</a> </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; } .panel-heading { display: flex; } .panel-header-right { margin-left: auto; } .panel-header-right > * { vertical-align: middle; } .panel-subtitle { font-size: 12px; margin:5px 0; } .btn-click { font-size: 26px; cursor: pointer; } .btn-click > .fa.fa-chevron-circle-up { color: rgba(0,0,0,0.5); } .btn-white { color: #5e5e5e; background-color: #fff; border: 1px solid #e5e9ec; } .primary-title { font-size: 26px; margin: 0px; margin-top: 10px; } .secondary-title { font-size: 17px; margin: 0px; margin-bottom: 20px; }

$(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'); } })