<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 ---------->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<div id="fb-root"></div>
<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
<div class="row">
<div class="col-md-2">
<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 text-center" >
<i class="icon-facebook-sign"></i><br/>Facebook
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-road"></h4><br/>Twitter
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-home"></h4><br/>Instagram
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-cutlery"></h4><br/>G+
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-credit-card"></h4><br/>Youtube <p>you tube</p>
</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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus
</div>
<!-- train section -->
<div class="bhoechie-tab-content">
<center data-tabcontent='<![CDATA[<a class="twitter-timeline" href="https://twitter.com/letitroll_fest" data-widget-id="599876244734418944">Tweets by @letitroll_fest</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>]]>'></center>
</div>
<!-- hotel search -->
<div class="bhoechie-tab-content">
<center data-tabcontent='<![CDATA[<iframe src="http://widget.websta.me/in/let_it_roll/?s=173&w=2&h=3&b=1&p=1" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:372px; height: 558px" ></iframe> <!-- websta - web.stagram.com --> ]]>'></center>
</div>
<div class="bhoechie-tab-content">
<center data-tabcontent='<![CDATA[<script src="https://apis.google.com/js/platform.js" async defer>
{lang: "cs"}
</script>
<div class="g-page" data-width="350" data-href="https://plus.google.com/113282341963993307426" data-theme="dark" data-showtagline="true" data-rel="publisher"></div>]]>'></center>
</div>
<div class="bhoechie-tab-content">
<center data-tabcontent='<![CDATA[<iframe width="400" height="225" src="https://www.youtube.com/embed/g50g4C-HnSo?showinfo=0" frameborder="0" allowfullscreen></iframe>]]>'></center>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</div>
</div>
<
body {
}
/* bhoechie tab */
div.bhoechie-tab-container{
z-index: 10;
position: fixed;
top:15px;
padding: 0 !important;
margin: 10px;
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-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-right: 10px solid #5A55A3;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
div.bhoechie-tab-content{
background-color: #ffffff;
border: 3px solid #eeeeee;
padding: 20px;
width: 850px;
}
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) {
fbInit=false;
e.preventDefault();
var a= 1;
var b=1;
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
b=1;
// if(b==1){
// $(this).siblings('a.active').removeClass("active");
// $(this).addClass("active");
// a=1;
// }
var index = $(this).index(),
close = $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).css("display")=="block"?true:false;
$("div.bhoechie-tab>div.bhoechie-tab-content").hide("slide").removeClass("active");
if(!close){
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).show("slide").addClass("active").find("center:empty").html(function(){
console.log(this);
var c = $(this).data().tabcontent.replace("<![CDATA[", "").replace("]]>", "");
$(this).html(c);
fbInit = $(this).data().fbinit;
});
if(fbInit){
FB.init({
appId : '200121386666097',
xfbml : true,
version : 'v2.3'
});
FB.Canvas.setSize();
}
}
else{
$("div.bhoechie-tab-menu>div.list-group>a").removeClass("active");
}
});
});
