Mon - Sun 8.00 AM - 8.00 PM
[email protected]
Home
Articles
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Our Tutorials
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Vue JS
Android
Ui Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Login Form
Modals
OTP Verification Form
Popular Notes
HTML
CSS
JavaScript
SQL
Services
About
Contact Us
Ui Code
Snippets
Chat box open on click
HTML
CSS
JS
Output
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap 5 CDN and css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- google font and font awesome CDN --> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Show and hide chat box on click</title> </head> <body> <h1 class="heading">Click on right bottom chat icon to open Chat box</h1> <!-- chat button start--> <div id="chat-circle" class="btn btn-raised"> <img src="https://www.teknowize.com/attachments/file_1658874188.svg" width="24" width="24" alt="chat"> </div> <!-- chat button end--> <!-- chat box start --> <div class="container-fluid mt-2"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="chaboxShowHide"> <div class="chatBox-mainDiv"> <div class="chatBox-head"> <img src="https://www.teknowize.com/attachments/file_1658873983.svg" alt="three dots"> <p class="m-0">Chat Box</p> <img src="https://www.teknowize.com/attachments/file_1658874045.svg" alt="arrow left" class="chatClsBtn"> </div> <div class="chatboxChatDiv px-4"> <div class="chatboxMsgDate"> <div class="dateDiv">Today</div> </div> <!-- --> <div class="selfMsg"> <p class="bold-font">How would I do that when this happens?</p> <span>10:30 AM</span> </div> <!-- --> <div class="otherMsg"> <span>10:31 AM</span> <p class="bold-font">When you refer back to the generalized form, you would see that... </p> </div> <!-- --> <!-- --> <div class="selfMsg"> <p class="bold-font">When this generalized form appears?</p> <span>10:30 AM</span> </div> <!-- --> <div class="otherMsg"> <span>10:30 AM</span> <p class="bold-font">How would I do that when this happens?</p> </div> <!-- --> <!-- --> <div class="selfMsg"> <p class="bold-font">How would I do that when this happens?</p> <span>10:30 AM</span> </div> <!-- --> <div class="otherMsg"> <span>10:30 AM</span> <p class="bold-font">How would I do that when this happens?</p> </div> <!-- --> <!-- --> <div class="selfMsg"> <p class="bold-font">How would I do that when this happens?</p> <span>10:30 AM</span> </div> <!-- --> <div class="otherMsg"> <span>10:30 AM</span> <p class="bold-font">Bye</p> </div> <!-- --> </div> <div class="chatBox-typingInput" style="position:absolute;bottom: 0px;width: 100%"> <div class="chatbox-send-btn"><input type="text" class="form-control" placeholder="Ask something..."> <img src="https://www.teknowize.com/attachments/file_1658874241.svg" width="24" width="24" alt="chat"> </div> </div> </div> </div> </div> </div> </div> <!-- chat box end--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </body> </html>
CSS
body { height: 100vh; position: relative; overflow: hidden; } .heading { color: rgb(6, 2, 114); text-align: center; padding: 3rem; } #chat-circle { position: fixed; bottom: 48px; right: 15px; background: #5A5EB9; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; padding: 5px; cursor: pointer; box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.6), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .chaboxShowHide { display: none; } .chatBox-mainDiv { position: relative; background: #FFFFFF; border: 1px solid #F0F0F0; height: calc(100vh - 240px); overflow: hidden; z-index: 3; } .chatBox-head { background: #6C63FF; border: 1px solid #6C63FF; border-radius: 0px; padding: 0.5rem 1.5rem; display: flex; justify-content: space-between; align-items: center; color: white; } .chatBox-head span { color: white; font-size: 20px; } .chatClsBtn { cursor: pointer; } .chatboxChatDiv { overflow-y: auto; height: calc(100vh - 342px); } .chatboxChatDiv::-webkit-scrollbar { width: 8px; } .chatboxChatDiv::-webkit-scrollbar-thumb { box-shadow: inset 0 0 2px #EDEDED; background: #EDEDED; border-radius: 10px; } .chatboxMsgDate { position: relative; display: flex; justify-content: center; align-items: center; margin: 1rem 0; } .chatboxMsgDate::before { content: ''; width: 100%; height: 1px; background: #F0F0F0; position: absolute; display: flex; align-items: center; } .dateDiv { background: #F0F0F0; border-radius: 5px; color: #616161; font-size: 10px; padding: 0.5rem 1rem; z-index: 1; } .selfMsg { display: flex; align-items: end; margin: 1.5rem 0; } .selfMsg p { font-size: 14px; max-width: 75%; background: #D8EEFF; border-radius: 5px 5px 0px 5px; margin: 0; padding: 1rem; word-break: break-all; } .selfMsg span { font-size: 10px; color: #616161; margin: 0; margin-top: auto; margin-left: 0.5rem; } /* */ .otherMsg { display: flex; align-items: end; justify-content: end; margin: 1.5rem 0; } .otherMsg p { font-size: 14px; max-width: 75%; background: #F3F3F3; border-radius: 5px 5px 5px 0px; margin: 0; padding: 1rem; word-break: break-all; } .otherMsg span { font-size: 10px; color: #616161; margin: 0; padding: 0; margin-top: auto; margin-right: 0.5rem; } .chatBox-typingInput { padding: 0.5rem 1.5rem; background: white; } .chatbox-send-btn { display: flex; align-items: center; background: #F3F3F3; border-radius: 5px; padding: 0 0.3rem; } .chatbox-send-btn input { border: none; outline: none; box-shadow: none; background: none; } .chatbox-send-btn input:focus { outline: none; box-shadow: none; background: none; } .chatbox-send-btn input::placeholder { font-size: 14px; color: #A3A3A3; } .chatbox-send-btn img { cursor: pointer; }
JS
$("#chat-circle").click(function () { $('.chaboxShowHide').show('slow'); $('#chat-circle').hide('slow'); }); $(".chatClsBtn").click(function () { $('.chaboxShowHide').hide('slow'); $('#chat-circle').show('slow'); });
Output
Mon -
Sun 8.00 AM - 8.00 PM
