<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <h3>Right Footer </h3> <section class="box-position"> <div class="container"> <div class="col-xs-12 col-md-3 col-sm-4 pull-right"> <!-- Message box title --> <div class="panel"> <div class="panel-heading top-bar" role="tab" id="open-message"> <div class="col-md-10 col-xs-10"> <p class="panel-title"><span class="glyphicon glyphicon-comment"></span>   Quick Message</p> </div> <div class="col-md-2 col-xs-2"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#message" aria-expanded="false" aria-controls="message"> <span class="glyphicon glyphicon-plus"></span></a> </div> </div> </div> <!-- Message body --> <div id="message" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <form action="#"> <div class="form-group "> <input type="text" class="form-control" id="name" placeholder="Name" required="required"> </div> <div class="form-group"> <input type="text" class="form-control" id="subject" placeholder="Subject" required="required"> </div> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="Email" required="required"> </div> <div class="form-group"> <textarea type="text" class="form-control" id="message" placeholder="Message..." required="required"></textarea> </div> <div class="form-group"> <input type="submit" class="form-control btn-success" id="submit" value="Send"> </div> </form> </div> </div> </div> </div> </section>

.glyphicon{color:#fff;} .panel{margin-bottom: 0px;} .panel-body{background-color:#FFF; border:1px solid#CCC;} .top-bar {background: #67b0d1; color: white; padding: 10px; position: relative; overflow: hidden; padding-right:5px;} .box-position{position: fixed;bottom: 0; width: 100%;}

$(document).on('click', '.panel-heading span.glyphicon-plus', function (e) { var $this = $(this); if (!$this.hasClass('panel-collapse')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapse'); $this.removeClass('glyphicon-plus').addClass('glyphicon-minus'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapse'); $this.removeClass('glyphicon-minus').addClass('glyphicon-plus'); } });