<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 ----------> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="input-group" id="adv-search"> <input type="text" class="form-control" placeholder="Search for snippets" /> <div class="input-group-btn"> <div class="btn-group" role="group"> <div class="dropdown dropdown-lg"> <button type="button" class="btn btn-default icon_drop" aria-expanded="false"><span class="caret icon_drop"></span></button> </div> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </div> </div> </div> <div class="input-group mapdiv"> <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"> <i class="material-icons">directions_walk</i> <div class="hidden-xs">Search By Name</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"> <i class="material-icons">add_location</i> <div class="hidden-xs">Search by Map</div> </button> </div> </div> <div class="well"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <p>Uraza095@gmail.com</p> <p>adilraja653@gmail.com</p> </div> <div class="tab-pane fade in" id="tab2"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2648.833038448318!2d-89.2826271!3d48.402149400000006!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4d59202c99c9252f%3A0x4cb61e2f5a8d87e!2s218+Humber+Crescent%2C+Thunder+Bay%2C+ON+P7C+5X2!5e0!3m2!1sen!2sca!4v1424370904204" style="border:0;width: 100%;"></iframe> </div> <div class="tab-pane fade in" id="tab3"> <h3>This is tab 3</h3> </div> </div> </div> </div>

.dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } #map { height:300px; } .mapdiv { z-index: 10000; position: absolute; display:none; width: 500px; margin-left: 32.2%; } .card { margin-top: 20px; padding: 30px; background-color: rgba(214, 224, 226, 0.2); -webkit-border-top-left-radius:5px; -moz-border-top-left-radius:5px; border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px; border-top-right-radius:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: #fff; background-color: rgba(255, 255, 255, 1); } .card.hovercard .card-background { height: 130px; } .card-background img { -webkit-filter: blur(25px); -moz-filter: blur(25px); -o-filter: blur(25px); -ms-filter: blur(25px); filter: blur(25px); margin-left: -100px; margin-top: -200px; min-width: 130%; } .card.hovercard .useravatar { position: absolute; top: 15px; left: 0; right: 0; } .card.hovercard .useravatar img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.5); } .card.hovercard .card-info { position: absolute; bottom: 14px; left: 0; right: 0; } .card.hovercard .card-info .card-title { padding:0 5px; font-size: 20px; line-height: 1; color: #262626; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .card.hovercard .card-info { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .btn-pref .btn { -webkit-border-radius:0 !important; }

$(document).ready(function () { $(".btn-pref .btn").click(function () { $(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default"); // $(".tab").addClass("active"); // instead of this do the below $(this).removeClass("btn-default").addClass("btn-primary"); }); $(".icon_drop").click(function () { $(".mapdiv").toggle(); }); });