<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="box-position"> <div class="container"> <div class="col-xs-12 col-md-4 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> <b>dfdf</b></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"> <div class="panel panel-info" style="padding:10px 10px 10px 10px;margin:5px 2px 5px 2px;"> <div style="text-align:center; "><b>ghfjjjjjjjjjj</b><br><br></div>fhghghghghghghghghghghghghghghghghghg<br><br>fghghghghghghghghghghgh </div> <div class="form-group"> <input type="hidden" class="form-control" id="subject" placeholder="Emne" > </div> <div class="form-group"> <textarea type="text" class="form-control" id="message" placeholder="Din besked.." 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: 8px; position: relative; overflow: hidden; padding-right:5px;} .box-position{position: fixed;top: 0px; 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'); } });