<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">
<a href="#" class="list-group-item active text-center">
<h4 class="glyphicon glyphicon-plane"></h4><br/>Flight
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-road"></h4><br/>Train
</a>
<a href="#" class="list-group-item text-center">
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum maximus efficitur. Suspendisse blandit, leo at blandit faucibus, mauris sapien vehicula ipsum, id facilisis erat mauris ut nisi. Morbi tincidunt ligula sed eros porta placerat. Proin semper metus iaculis, sagittis mauris at, tincidunt neque. Aliquam erat volutpat. Donec a urna a nulla mattis tincidunt a eget odio. Aliquam et leo eget dui aliquet fermentum. Aenean in ultrices dui, eget placerat elit. Donec pulvinar felis et varius consequat. Phasellus id sem a leo ornare convallis at at ligula. Suspendisse posuere, nisl vel consectetur volutpat, nisl arcu ullamcorper turpis, a eleifend ligula mi ac arcu. Donec egestas erat nulla, a facilisis turpis commodo eu. Vestibulum quis urna ut elit porttitor eleifend nec quis sem. Phasellus suscipit, odio vel ultrices egestas, arcu est mattis elit, ac laoreet lectus arcu sit amet enim.
Aliquam malesuada, arcu nec laoreet fermentum, magna urna euismod lectus, fermentum lacinia est magna eu tortor. Nullam dapibus enim quam, id scelerisque nibh condimentum non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempor vulputate orci, quis ultrices ex pretium ut. Sed vel venenatis est. In laoreet ligula mattis, lacinia tortor non, lacinia ligula. Sed vitae auctor tellus. Donec elementum cursus scelerisque. Quisque pharetra placerat nunc eu pulvinar. Curabitur tristique, leo nec imperdiet cursus, urna elit molestie mauris, a facilisis odio tellus quis libero. Quisque sed imperdiet enim, eu mattis elit. Vivamus semper nulla lacus, sit amet molestie tortor suscipit nec. Vivamus vel pretium nunc, ut suscipit dui. Suspendisse placerat risus et arcu tincidunt, in pharetra felis tempor.
Duis molestie, urna et placerat lobortis, neque quam congue justo, eget dignissim sapien ante nec justo. Proin pretium, erat eget venenatis efficitur, ex metus finibus metus, mattis rhoncus turpis diam eu dui. Curabitur molestie in nulla vel mollis. Nullam mollis dui non magna sodales convallis. Maecenas sem tellus, tempor eu elit quis, auctor laoreet mi. Duis faucibus venenatis mi non maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus aliquet nunc sit amet mattis tristique.
Morbi faucibus euismod suscipit. Donec varius pellentesque faucibus. Sed tincidunt libero sed luctus porta. Cras sed porttitor eros. Quisque vel nisl lectus. Pellentesque pellentesque turpis libero, non aliquet orci dapibus vel. Nam vitae felis fermentum, fermentum nisi scelerisque, posuere lacus. Aliquam lacus velit, aliquet quis massa sed, auctor molestie tellus. Proin molestie odio maximus sagittis venenatis. Mauris commodo a lorem ut interdum. Integer a viverra risus. Cras convallis eros sit amet congue interdum. Praesent elementum nisi vel justo volutpat tempus. Nam at dignissim metus, ut auctor sapien.
Vivamus arcu neque, congue sit amet turpis quis, pulvinar posuere sapien. Mauris sapien diam, faucibus venenatis purus et, faucibus rutrum lacus. Nulla maximus semper dolor nec tincidunt. Curabitur mollis a enim ac semper. Donec rutrum venenatis quam, nec imperdiet quam ultrices vel. Nam finibus in dui quis luctus. Nulla suscipit leo at est vestibulum ullamcorper
.</p>
</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");
});
});
