<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="container"> <div class="row"> <div class="col-md-5 chatbox" id="chatbox"> <div class="panel panel-primary"> <div class="panel-heading text-center" id="accordion" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <h4>Have a Question ?</h4> </div> <div class="panel-collapse collapse" id="collapseOne"> <div class="panel-body"> <ul class="chat" id="chat"> </ul> </div> <div class="panel-footer"> <div class="input-group"> <input id="txtsendtext" 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="btnchat"> Send</button> </span> </div> </div> </div> </div> </div> </div> </div>

.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; } .chatbox{ top: auto;bottom: 0px;position: absolute;right: 0px; } #accordion { cursor: pointer; cursor: hand; } #accordion h4{ margin: 0px; }

$(document).ready(function(){ var counter = 1; $('#btnchat').click(function(){ var $newMsg = $("<li></li>"); $newMsg.attr("id", "Msg" + counter++); $newMsg.attr("class", "text-right"); $("#chat").append($newMsg); var value = $('#txtsendtext').val(); $newMsg.text(value); $("#txtsendtext").val(''); }); })