<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="sidebar-contact"> <div class="toggle">Click Here</div> <div class="scroll"> <div class="book-contact"> <div class="row"> <ul> <li> <a href="#"> <div class="media"> <i class="far fa-calendar-plus"></i> <div class="media-body space-sm"> <div class="title"> Click 1 </div> </div> </div> </a> </li> <li> <a href="#"> <div class="media"> <i class="fas fa-heartbeat"></i> <div class="media-body space-sm"> <div class="title"> Click 2 </div> </div> </div> </a> </li> <li> <a href="#"> <div class="media"> <i class="fas fa-edit"></i> <div class="media-body space-sm"> <div class="title"> Click 3 </div> </div> </div> </a> </li> <li> <a href="#"> <div class="media"> <i class="fas fa-map-marker-alt"></i> <div class="media-body space-sm"> <div class="title"> Click 4 </div> </div> </div> </a> </li> <li> <a href="#"> <div class="media"> <i class="fas fa-phone"></i> <div class="media-body space-sm"> <div class="title"> Click 5 </div> </div> </div> </a> </li> </ul> </div> </div> </div> </div>

.sidebar-contact { position: fixed; top: 50%; left: -290px; transform: translateY(-50%); width: 290px; height: auto; padding: 0px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); box-sizing: border-box; transition: 0.5s; z-index: 999999; } .sidebar-contact.active { left: 0; } .sidebar-contact input, .sidebar-contact textarea { width: 100%; height: 36px; padding: 5px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .5); outline: none; } .sidebar-contact h2 { margin: 0 0 20px; padding: 0; } .sidebar-contact textarea { height: 60px; resize: none; } .sidebar-contact input[type="submit"] { background: #00bcd4; color: #fff; cursor: pointer; border: none; font-size: 18px; } .toggle { position: absolute; height: 50px; width: 100px; text-align: center; cursor: pointer; background: #ee344e; top:24px; right: -65px; line-height: 48px; border-radius: 0px 0px 10px 10px; color: #ffff; transform: rotate(-90deg); } @media(max-width:768px) { .sidebar-contact { width: 100%; height: 100%; left: -100%; } .sidebar-contact .toggle { top: 50%; transform: rotate(-90deg); transition: 0.5s; } .sidebar-contact.active .toggle { top: 0; right: 0; transform: translateY(0); } .scroll { width: 100%; height: 100%; overflow-y: auto; } .content { padding: 50px 50px; } } .book-contact { min-height: 100px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .book-contact ul li { font-size: 16px; display: block; padding: 15px; color: #444444; border-bottom: 1px solid #ccc; width: 100%; } .book-contact ul li:last-child { margin-right: 0; padding-right: 0; border-right: 0; } .book-contact ul { padding: 0; margin: 0; } .book-contact ul li .media i { margin-top: 0px; color: #ee344e; font-size: 22px; margin-right: 15px; } .book-contact ul li .media .media-body .title { font-weight: 500; font-size: 16px; } .book-contact ul li .media .media-body .info { font-size: 16px; }

$(document).ready(function () { $('.toggle').click(function () { $('.sidebar-contact').toggleClass('active') $('.toggle').toggleClass('active') }) })