<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 ----------> <div class="chat-box collapse" id="hid-area"> <div class="box"> <div class="box-head"> <h3 class="box-title">İletişim</h3> <a href="#hid-area" data-toggle="collapse" data-target="#hid-area" aria-expanded="true" aria-controls="hid-area" class="chat-box-window-close"><i class="fa fa-times"></i></a> </div> <div class="box-body"> <form action="#" method="post"> <div class="form-group"> <label>Ad ve Soyad</label> <input type="text" name="" class="form-control"> </div> <div class="form-group"> <label>E-mail Adresi</label> <input type="email" name="" class="form-control"> </div> <div class="form-group"> <label>Mesajınız</label> <textarea name="" rows="2" class="form-control"></textarea> </div> <button type="submit" class="btn btn-block btn-msg-send">Gönder</button> </form> </div> </div> </div> <!-- /chat box window --> <a class="chat-button" data-toggle="collapse" href="#hid-area" role="button" aria-expanded="true" aria-controls="hid-area"><i class="fa fa-times"></i></a> <!-- /buttons -->

.chat-box { position: absolute; bottom: 90px; right: 20px; width: 300px; } .chat-box.collapse:not(.show) { display: inherit; } .chat-box.collapse:not(.in) { display: none; } .box { width: 100%; position: relative; background-color: #ffffff; border: 1px solid #FF9F00; border-radius: 3px; box-shadow: 0px 1px 3px rgba(0,0,0,.03); } .box > .box-head { padding: 10px 15px; background-color: #ff9f00; } .box > .box-head > h3.box-title { margin: 0px; padding: 0px; color: #ffffff; font-size: 21px; font-weight: normal; } .box > .box-head > .chat-box-window-close { background-color: #ffffff; width: 1.50rem; height: 1.50rem; float: right; position: relative; margin-top: -1.60rem; line-height: 1.30rem; text-align: center; border-radius: 3px; text-decoration: none; color: #ff9f00; outline: none!important; } .box > .box-body { padding: 15px; min-height: 200px; } .box > .box-body > p:last-child { margin-bottom: 0px; } .box > .box-body > form > .btn-msg-send { background-color: #ff9f00; color: #ffffff; } .box > .box-footer { border-top: 1px solid #ff9f00; padding: 10px 15px; } .box > .box-footer > p { margin: 0px; padding: 0px; } .chat-button { background-color: #ff9f00; color: #ffffff; width: 3rem; height: 3rem; border-radius: 3px; text-align: center; line-height: 3rem; bottom: 20px; right: 20px; position: fixed; box-shadow: 0px 1px 3px rgba(0,0,0,.03); } .chat-button:hover { color: #ffffff; text-decoration: }

$(function(e){ "use strict"; $(document).on('click', '.chat-box .collapse', function (e) { e.stopPropagation(); }); });