<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"> <div class="chat-box"> <div class="chat-list w-100"> <div class="d-flex justify-content-between chat-list-item"> <img src="https://ui-avatars.com/api/?name=G+A&size=48&background=random" class="user-img" alt="Gürkan Atik" width="48" height="48"> <div class="last-msg-info pl-2"> <div class="d-flex align-items-center justify-content-between w-100"> <span class="d-block username">gurkanatik</span> <span class="d-block last-msg-date"> <i class="far fa-clock"></i> 12 min ago</span> </div> <span class="d-block last-msg text-truncate ">John Doe called, he wants his name back!</span> </div> </div> <div class="d-flex justify-content-between chat-list-item"> <img src="https://ui-avatars.com/api/?name=O+B&size=48&background=random" class="user-img" alt="Okan Bulgurlu" width="48" height="48"> <div class="last-msg-info pl-2"> <div class="d-flex align-items-center justify-content-between w-100"> <span class="d-block username">cmokanbulgurlu</span> <span class="d-block last-msg-date"> <i class="far fa-clock"></i> 1 day ago</span> </div> <span class="d-block last-msg text-truncate ">Carlsen cried yesterday hahahjs</span> </div> </div> <div class="d-flex justify-content-between chat-list-item"> <img src="https://ui-avatars.com/api/?name=O+S&size=48&background=random" class="user-img" alt="Oliver Sykes" width="48" height="48"> <div class="last-msg-info pl-2"> <div class="d-flex align-items-center justify-content-between w-100"> <span class="d-block username">oliversykes</span> <span class="d-block last-msg-date"> <i class="far fa-clock"></i> 3 days ago</span> </div> <span class="d-block last-msg text-truncate w-100">Bro check my latest single. It's dopeeeeeeeeeee</span> </div> </div> </div> <div class="message-box w-100 d-flex flex-column"> <div class="top-section d-flex align-items-stretch justify-content-between"> <span class="d-flex align-items-center justify-content-center go-back px-3"><i class="fa fa-chevron-left"></i></span> <div class="user-info pr-3 py-2"> <span class="username mr-1">gurkanatik</span> <img src="https://ui-avatars.com/api/?name=G+A&size=48&background=random" class="user-img" alt="Gürkan Atik" width="40" height="40"> </div> </div> <div class="message-section"> <div class="message"> Hi there, sup? </div> <div class="message ml-auto"> Hi there, sup? </div> </div> <div class="bottom-section"> <div class="form-group mb-0 position-relative"> <input type="text" class="form-control" placeholder="Text here"> <button type="button"><i class="fas fa-paper-plane"></i></button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

.chat-box, .chat-box .chat-list, .chat-box .message-box{ height: 100vh; overflow-y: auto; position: relative; transition: all .3s; } .chat-box.chat-active .chat-list{ height: 100%; position: absolute; top: 0; left: -100%; } .chat-box.chat-active .message-box{ right: 0; } .chat-box .chat-list{ left: 0; } .chat-box .chat-list .chat-list-item{ padding: 12px 15px; border-bottom: 1px solid #e1e1e1; } .chat-box .chat-list .chat-list-item:hover{ cursor: pointer; background-color: #f1f1f1; } .chat-box .chat-list .chat-list-item:last-child{ border-color: transparent; } .chat-box .chat-list .chat-list-item .user-img, .chat-box .message-box .user-img{ border-radius: 48px; } .chat-box .chat-list .chat-list-item .username, .chat-box .message-box .username{ color: #232323; font-weight: 700; font-size: 16px; } .chat-box .chat-list .chat-list-item .last-msg-info{ width: calc( 100% - 48px); } .chat-box .chat-list .chat-list-item .last-msg{ color: #666; font-size: 14px; } .chat-box .chat-list .chat-list-item .last-msg-date{ font-size: 12px; } .chat-box .message-box{ position: absolute; top: 0; height: 100%; right: -100%; } .chat-box .message-box .top-section{ background-color: #232323; color: #f1f1f1; } .chat-box .message-box .top-section .username{ color: #f1f1f1; } .chat-box .message-box .top-section .go-back{ text-align: center; } .chat-box .message-section{ height: calc( 100vh - 56px); padding: 15px 15px 0; overflow-y: auto; } .chat-box .message-section .message{ padding: 5px 15px; background: #232323; color: #fff; border-radius: 10px; display: table; margin-bottom: 15px; } .chat-box .message-section .message.ml-auto{ background-color: #075E54; } .chat-box .bottom-section{ padding: 15px; } .chat-box .bottom-section input{ padding-right: 38px; } .chat-box .bottom-section button{ position: absolute; right: 0; top: 0; border: none; height: 38px; width: 38px; border-radius: .25rem; background-color: transparent; }

$('.chat-list-item, .go-back').on('click', function (){ $('.chat-box').toggleClass('chat-active') })