<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 ----------> <div class="container"> <div id="chats" class="container"> <div class="chat-window col-xs-5 col-md-3" id="chat_window_1"> <div class="chat-header col-xs-12"> <div class="col-xs-8"> <span class="glyphicon glyphicon-comment"></span><span class="username"> Mario</span> </div> <div class="col-xs-4 text-right"> <a><span class="glyphicon glyphicon-minus icon_minim"></span></a> <a><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a> </div> </div> <div class="toHide"> <div class="chat-body"> <div class="row msg msg-sent"> <div class="col-xs-10"> <div class="msg-text"> <p>Some, beautiful text</p> </div> </div> <div class="col-xs-2"> <div class="profile-pic"> <img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg"> </div> </div> </div> <div class="row msg msg-sent"> <div class="col-xs-10"> <div class="msg-text"> <p>Some, beautiful, long looooooooooooooooooooooooooooooooooooooooooooooooooooooong text</p> </div> </div> <div class="col-xs-2"> <div class="profile-pic"> <img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg"> </div> </div> </div> <div class="row msg msg-sent"> <div class="col-xs-10"> <div class="msg-text"> <p>Some, beautiful text</p> </div> </div> <div class="col-xs-2"> <div class="profile-pic"> <img class="img-responsive img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg"> </div> </div> </div> </div> <div class="chat-footer"> <div class="input-group"> <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." /> <span class="input-group-btn"> <button class="btn btn-primary btn-sm" id="btn-chat">Send</button> </span> </div> </div> </div> </div> </div> </div>

html, body{ height: 100%; } #chats{ position: fixed; bottom: 0; width: 100%; background: red; height: 400px; } #chats .chat-window{ position: relative; height: 100%; padding: 0; } #chats .chat-header{ position: absolute; top: 0; padding: 15px; width: 100%; height: 50px; background: #2F2F2F; color: white; font-weight: bold; border-radius: 5px 5px 0 0; } #chats .chat-header a{ text-decoration: none; cursor: pointer; color: white; } #chats .toHide{ } #chats .chat-body{ position: absolute; width: 100%; top: 50px; bottom: 50px; padding: 10px 10px 0 10px; background: #dedede; overflow-x: hidden; font-size: 13px; } #chats .msg{ padding: 10px 0; margin: 0; } #chats .msg div{ padding: 0; height: 100%; min-height: 50px; } #chats .msg .msg-text{ background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 10px; margin: 0 5px; } #chats .msg-text p{ overflow-wrap: break-word; word-wrap: break-word; } #chats .profile-pic img{ width: 50px; height: 50px; } #chats .chat-footer{ position: absolute; height: 50px; width: 100%; bottom: 0; padding: 10px 20px 0 20px; border-top: #cccccc solid 1px; background: #f5f5f5; }

$( document ).ready(function(){ $(".icon_close").click(function(){ $( this ).closest(".chat-window").remove(); }); }); $(document).on('click', '.icon_minim', function (e) { var toHide = $( this ).closest(".chat-window").find(".chat-body"); if (toHide.hasClass("panel-hidden")){ toHide.removeClass("panel-hidden"); toHide.slideUp(); }else{ toHide.addClass("panel-hidden"); toHide.slideDown(); } });