<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="chatcontainer">
<div class="panel panel-primary">
<div class="panel-heading" id="accordion">
<span class="glyphicon glyphicon-comment"></span> Chat
<div class="btn-group pull-right">
<a type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
<ul class="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>14 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div style="width: 800px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra a mauris aliquet porttitor. Nullam vitae nisi mauris. Nullam placerat tristique enim, vel rhoncus magna dignissim sed. Integer sed magna nec ante facilisis feugiat. Nam placerat volutpat pellentesque. Nullam feugiat, felis ut varius euismod, dolor massa varius ipsum, vitae bibendum ante diam sed felis. Nullam ut leo id nisl elementum congue. Nulla et fermentum leo. Aenean elementum laoreet ornare. Mauris tincidunt nisi nisl, vel interdum nibh sollicitudin at.</p>
<p>Mauris consectetur enim vel metus interdum sagittis. Nulla mollis a felis a iaculis. Sed pulvinar purus ac dignissim euismod. Mauris in tellus quis mi elementum finibus finibus et ligula. Etiam volutpat condimentum erat, et condimentum erat tempor ac. Proin ullamcorper molestie ipsum vel pellentesque. Quisque non nisl consequat, bibendum risus eu, vehicula metus. Sed elit nulla, finibus eget molestie sit amet, mattis iaculis arcu. Pellentesque fringilla ante nibh, ut varius sapien ultrices non.</p>
<p>Cras at lectus nibh. Duis sit amet hendrerit felis. Proin id facilisis lacus, et tincidunt magna. Aliquam id elementum mauris. Suspendisse lorem arcu, accumsan a risus eget, aliquam fringilla urna. Quisque consectetur quam sed metus consectetur, vitae auctor urna consectetur. Integer enim nisi, pharetra nec dui a, vestibulum commodo justo. Integer ultrices odio sem, mattis molestie ipsum tempor eu. Phasellus vel massa ante.</p>
<p>Sed accumsan ultricies mollis. Phasellus pellentesque orci vitae cursus congue. Fusce id tortor nisi. Pellentesque purus mauris, sagittis at sollicitudin sed, finibus vel nisi. In ipsum tortor, molestie eu mollis vel, vehicula mattis est. Cras eu sapien vel libero efficitur mattis. Quisque et augue risus. Sed condimentum nec nibh id pulvinar.</p>
<p>Sed mattis dapibus ex, sed interdum dolor rutrum sed. Maecenas et nunc vel dui porttitor convallis. In elementum molestie dui, sit amet congue urna cursus in. Nam lorem orci, faucibus nec arcu vitae, sagittis dignissim urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam mi tellus, vulputate nec ipsum vel, consectetur varius enim. Proin venenatis tortor magna, non commodo risus venenatis sed. Duis finibus faucibus ligula, eu malesuada erat accumsan quis.</p>
<p>Donec egestas arcu non odio iaculis tempor. Nulla euismod at mi et mattis. Integer eget ante lacinia, pellentesque sapien sed, iaculis sem. Phasellus id ex et arcu luctus mattis. Cras aliquet convallis nibh, a ornare neque. Etiam porta arcu eget metus luctus, pellentesque tristique augue aliquet. Suspendisse pharetra lacus velit, quis scelerisque mi auctor in. Pellentesque tincidunt lobortis mattis.</p>
<p>Donec tincidunt vitae tortor id semper. Nulla pellentesque sem eget tempus pellentesque. Phasellus fermentum ex sed vulputate interdum. Cras finibus erat purus, et commodo risus porta placerat. Cras mollis eu tortor sed consectetur. Vestibulum tincidunt dictum odio ut commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas volutpat felis nunc, sed consectetur massa rutrum a.</p>
<p>Vestibulum tempus lectus enim, et rhoncus mi rhoncus ut. Suspendisse dignissim elit velit, at porta turpis suscipit vitae. Integer a quam bibendum, posuere ipsum eget, placerat massa. Morbi hendrerit scelerisque placerat. Fusce eget ex tellus. Maecenas quis tempus lorem, sed mattis est. Integer ornare erat scelerisque suscipit ultrices. Donec enim diam, dapibus nec tortor a, blandit scelerisque ex. Curabitur elementum vestibulum ligula, eu suscipit ligula sagittis sollicitudin. Donec fermentum interdum fermentum. Vestibulum finibus ligula quis purus cursus mollis. Nullam tristique massa ut ante auctor mollis. Ut sit amet iaculis est. Nulla ullamcorper sodales ligula vitae sollicitudin. Ut nec nisi in lacus gravida molestie eu at libero. Sed nec faucibus ligula.</p>
<p>Fusce eleifend lorem a nulla vehicula, non egestas arcu rhoncus. Nulla tempor odio et varius eleifend. Curabitur cursus tincidunt auctor. Etiam non mi congue metus tincidunt vehicula vel ut sapien. In rutrum sit amet neque lobortis ultrices. Nunc congue scelerisque lacus aliquet placerat. Donec in aliquet metus, sit amet sagittis erat. Sed eget porta velit, sed maximus ligula. Nam id est nulla. In tempus enim sed ipsum condimentum, gravida tempus urna dapibus. Cras est ipsum, interdum vitae mollis id, eleifend lacinia tortor.</p>
<p>Maecenas elementum quam at diam blandit egestas. Nulla sit amet odio eros. Praesent ligula purus, ultrices non ante a, hendrerit viverra ante. Suspendisse sit amet mi id ligula imperdiet condimentum. Aliquam nec luctus leo, in malesuada augue. Proin sagittis non ante sed dapibus. Vestibulum volutpat ante at nunc tincidunt posuere. Cras nisl arcu, elementum non molestie non, sodales eu lectus. Quisque vitae purus vitae purus posuere pulvinar. Maecenas eu dui sapien. Aliquam id tellus et augue consectetur tincidunt ut rutrum purus. Mauris blandit et sapien ut venenatis. Pellentesque tempor scelerisque nibh, eu faucibus tellus porttitor ac. Duis ac metus dolor.</p>
</div>
.chatcontainer {
display: inline-block;
width: 400px;
position: fixed;
left: 20%;
}
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body
{
margin-left: 60px;
}
.chat li.right .chat-body
{
margin-right: 60px;
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}
.panel-body
{
overflow-y: scroll;
height: 250px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
