<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-2"> <div class="panel"> <div class="panel-heading clickable"> <h3 class="panel-title"> CONTACT <b>+</b></h3> </div> <div class="panel-body"> T: +44 787.613.4999<br> E: office@Ahead of the </div> </div> </div> </div> </div>

.panel-heading span { text-align:center; vertical-aligm:middle; font-size: 15px; margin-right: 0px; }

$(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('h3').text("CONTACT <b>+</b>"); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('h3').text("CONTACT <b>x</b>"); } }); $(document).on('click', '.panel div.clickable', function (e) { var $this = $(this); if (!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('h3').text("CONTACT <b>+</b>"); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('h3').text("CONTACT <b>X</b>"); } }); $(document).ready(function () { $('.panel-heading span.clickable').click(); $('.panel div.clickable').click(); });