"chat hub"
Bootstrap 3.3.0 Snippet by chatbox

<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-fluid"> <div class="row"> <div class="col-md-3"> <div class="row chats-row"> <div class="col-md-12"> <a href="#" class="list-group-item open-request"> <p>Escrow ID: 12345678</p> <p>Escrow Title: Title Comes Here</p> <p>Amount: INR 2000.00</p> <p>Your Role: Buyer</p> <p>Seller Email: something@email.com</p> <p>Current Status: In Progress</p> <br> <button class="btn btn-success">Mark Escrow Complete</button> <button class="btn btn-warning">Report Dispute</button> </a> <a href="#" class="list-group-item chat-request">Robert Johnson - Muroc Industries</a> </div> <div class="col-md-12"> <a href="#" class="list-group-item">Travis Pitts - TeamSupport</a> <a href="#" class="list-group-item list-group-item-success">Heather Townsen - MyCCA</a> <a href="#" class="list-group-item active">Eric Harrington - TeamSupport</a> </div> </div> </div> <div class="col-md-9 current-chat"> <div class="row chat-toolbar-row"> <div class="col-sm-12"> </div> </div> <div class="row current-chat-area"> <div class="col-md-12"> <ul class="media-list"> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle " src="https://app.teamsupport.com/dc/1078/UserAvatar/1839999/48/1470773165634"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Buyer | 23rd June at 4:00pm</small> <hr> </div> </div> </div> </li> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle " src="https://app.teamsupport.com/dc/1078/UserAvatar/2733968/48/1470773158079"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Seller | 23rd June at 5:00pm</small> <hr> </div> </div> </div> </li> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle " src="https://app.teamsupport.com/dc/1078/UserAvatar/1839999/48/1470773165634"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Buyer | 23rd June at 5:10pm</small> <hr> </div> </div> </div> </li> <li class="media"> <div class="media-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle" src="https://app.teamsupport.com/dc/1078/UserAvatar/2733968/48/1470773158079"> </a> <div class="media-body"> Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa.Donec sit amet ligula enim. Duis vel condimentum massa. Donec sit amet ligula enim. Duis vel condimentum massa. <br> <small class="text-muted">Seller | 23rd June at 5:20pm</small> <hr> </div> </div> </div> </li> </ul> </div> </div> <div class="row current-chat-footer"> <div class="panel-footer"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Send</button> </span> </div> </div> </div> </div> </div> </div>
.blue { background: blue } .grey { background: grey } .chats-row { height: 100vh; } .chats-row div { height: 50%; border: 1px solid #ddd; padding: 0px; } .list-group-item { border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .list-group-item:first-child { border-top: none; border-top-left-radius: 0px; border-top-right-radius: 0px; } .current-chat { height: 100vh; border: 1px solid #ddd; } .chat-toolbar-row { background-color: #f5f5f5; } .chat-toolbar { margin-top: 10px; margin-bottom: 10px; } .current-chat-area { padding-top: 10px; overflow: auto; height: 85vh; } .current-chat-footer { position: absolute; bottom: 0; }
$( document ).ready(function() { $( ".chat-request" ).click(function(e) { e.preventDefault(); $('.open-request').html('Matthew Townsen - TeamSupport').removeClass('open-request') $(this).html('<p>Name: Matthew Townsen</p>' + '<p>Email: mtownsen@teamsupport.com</p>' + '<p>Time: 2:47 PM</p>' + '<p>Message: Its all broken</p>' + '<button class="btn btn-default">Accept</button>') .addClass('open-request'); }); });

Related: See More


Questions / Comments: