<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="container"> <div class="row"> <button id="toogleButton" class="btn btn-default tooglePanels"> <span class="pull-right clickable onToggle tooglePanelButton showToggleButton"> Hide <i class="glyphicon glyphicon-minus"></i> </span> <span class="pull-right clickable offToggle tooglePanelButton hideToggleButton"> Show <i class="glyphicon glyphicon-plus"></i> </span> </button> </div> <div class="container-fluid"> <div class="row"> <div id="proposalAccordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#proposalAcoordion" href="#collapseContact">Contact</a> </h4> </div> <div id="collapseContact" class="panel-collapse collapse in"> <div class="panel-body"> <p>CONTACT BODY</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#proposalAccordion" href="#collapseProposal">Proposal</a> </h4> </div> <div id="collapseProposal" class="panel-collapse collapse"> <div class="panel-body"> <p>PROPOSAL BODY</p> </div> </div> </div> </div> </div> </div> </div>

.tooglePanels { outline: 0 } .tooglePanels:focus { outline: 0 } .tooglePanelButton { position: relative; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease } .hideToggleButton { filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity: 0; margin-left: -250px } .showToggleButton { filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity: 1; margin-left: 0 }

var toogle = (function () { return { init: function(buttonId, accordionId) { var that = this; $(buttonId).click(function() { that.togglePanels(accordionId, $(buttonId)); }); }, togglePanels : function(accordionId, buttonContainer){ var onButton = $(buttonContainer).children('.onToggle').eq(0); var offButton = $(buttonContainer).children('.offToggle').eq(0); if (onButton.hasClass('hideToggleButton')){ this.openAllPanels(accordionId); offButton.addClass('hideToggleButton'); offButton.removeClass('showToggleButton'); onButton.removeClass('hideToggleButton'); onButton.addClass('showToggleButton'); } else{ this.closeAllPanels(accordionId); onButton.addClass('hideToggleButton'); onButton.removeClass('showToggleButton'); offButton.addClass('showToggleButton'); offButton.removeClass('hideToggleButton'); } }, openAllPanels : function(aId) { $(aId + ' .panel-collapse:not(".in")').collapse('show'); }, closeAllPanels : function(aId) { $(aId + ' .panel-collapse.in').collapse('hide'); } } }) (); $(function () { toogle.init('#toogleButton', '#proposalAccordion'); });