"Quick Right Footer Responsive Message Box"
Bootstrap 3.3.0 Snippet by Goutam Bishwas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
.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%;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(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');
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: