<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 ----------> <br> <div class="container"> <div class="row"> <div class="col-sm-3"> <a href="#" class="nav-tabs-dropdown btn btn-block btn-primary">Tabs</a> <div class="span12"> <form id="custom-search-form" class="form-search form-horizontal pull-right"> <input type="text" class="search-query mac-style" placeholder="Search"> <button type="submit" class="btn btn-primary"><i class="icon-search"></i></button> </form> </div> <ul id="nav-tabs-wrapper" class=" nav-stacked well"> <br> <br> <br> <li><a href="#vtab1">Remote</a></li> <li><a href="#vtab2" data-toggle="tab">Customer environment</a></li> <li><a href="#vtab3" data-toggle="tab">Product information</a></li> <li><a href="#vtab4" data-toggle="tab">Responsible</a></li> <li><a href="#vtab5" data-toggle="tab">Installation documentation</a></li> <li><a href="#vtab6" data-toggle="tab">LiveTime search</a></li> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </ul> </div> </div> </div>

body{ height: 776px; width: 399px; } ul { list-style-type: circle; list-style-position: outside; list-style-image: none; } li{ margin: 0 0 13px 0; font-size: 15px; } .nav-tabs-dropdown { display: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media screen and (max-width: 968px) { .nav-tabs-dropdown { display: block; } #nav-tabs-wrapper { display: none; border-top-left-radius: 0; border-top-right-radius: 0; text-align: center; } .nav-tabs-horizontal { min-height: 820px; padding: 29px; margin-bottom: 30px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05); } .nav-tabs-horizontal > li { float: none; } .nav-tabs-horizontal > li + li { margin-left: 2px; } .nav-tabs-horizontal > li, .nav-tabs-horizontal > li > a { background: transparent; width: 100%; } .nav-tabs-horizontal > li > a { border-radius: 4px; } .nav-tabs-horizontal > li.active > a, .nav-tabs-horizontal > li.active > a:hover, .nav-tabs-horizontal > li.active > a:focus { color: #ffffff; background-color: #428bca; } } #custom-search-form .search-query { /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: width 0.2s ease-in-out; -moz-transition:width 0.2s ease-in-out; -o-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } #custom-search-form button { border: 0; background: none; /** belows styles are working good */ margin-top: 52px; margin-right: 50px; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .search-query:focus + button { z-index: 3; } .search-query:focus{ width: 360px; }

$('.nav-tabs-dropdown').each(function(i, elm) { $(elm).text($(elm).next('ul').find('li.active a').text()); }); $('.nav-tabs-dropdown').on('click', function(e) { e.preventDefault(); $(e.target).toggleClass('open').next('ul').slideToggle(); }); $('#nav-tabs-wrapper a[data-toggle="tab"]').on('click', function(e) { e.preventDefault(); $(e.target).closest('ul').hide().prev('a').removeClass('open').text($(this).text()); });