"Simple Vertical Tab 33.333%"
Bootstrap 3.1.0 Snippet by qweasd

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu" > <div class="list-group" style="height:370px;"> <a href="#" class="list-group-item active text-center" style="height:33.33%;"> <h4 class="glyphicon glyphicon-plane"></h4><br/>Lorum Ipsum </a> <a href="#" class="list-group-item text-center" style="height:33.33%;"> <h4 class="glyphicon glyphicon-road"></h4><br/>Lorum Ipsum </a> <a href="#" class="list-group-item text-center" style="height:33.33%;"> <h4 class="glyphicon glyphicon-home"></h4><br/>Hotel </a> <!-- <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-cutlery"></h4><br/>Restaurant </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-credit-card"></h4><br/>Credit Card </a> --> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab"> <!-- flight section --> <div class="bhoechie-tab-content active"> <center> <h1 class="glyphicon glyphicon-plane" style="font-size:14em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2> <h3 style="margin-top: 0;color:#55518a">Flight Reservation</h3> </center> </div> <!-- train section --> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-road" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2> <h3 style="margin-top: 0;color:#55518a">Train Reservation</h3> </center> </div> <!-- hotel search --> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-home" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2> <h3 style="margin-top: 0;color:#55518a">Hotel Directory</h3> </center> </div> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-cutlery" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2> <h3 style="margin-top: 0;color:#55518a">Restaurant Diirectory</h3> </center> </div> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-credit-card" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2> <h3 style="margin-top: 0;color:#55518a">Credit Card</h3> </center> </div> </div> </div> </div> </div>
/* bhoechie tab */ div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; margin-left: 50px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #5A55A3; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #5A55A3; background-image: #5A55A3; color: #ffffff; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #5A55A3; } div.bhoechie-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; }
$(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); }); });

Questions / Comments:

Nice job. But what if you use the same tab twice within one page. the second one will not display any content. instead it affects the first tab to change content.

Fita () - 9 years ago - Reply 0