<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="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 nav ">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
</div>
<div class="col-xs-6 nav ">
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
Try it Yourself »
<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 nav ">
<div class="list-group">
<a href="#m1" data-toggle="pill" class="list-group-item active text-center">
Участник 1
</a>
<a href="#m2" data-toggle="pill" class="list-group-item text-center">
Участник 2
</a>
<a href="#m3" data-toggle="pill" class="list-group-item text-center">
Участник 3
</a>
<a href="#" class="list-group-item text-center">
Инфо про команду
</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">
<form class="form-horizontal ng-pristine ng-invalid ng-touched" role="form" ng-reflect-form="[object Object]">
<div class="form-group">
<label class="col-sm-3 control-label" for="firstName">Ім'я</label>
<div class="col-sm-9">
<input autofocus="" class="form-control ng-pristine ng-invalid ng-touched" formcontrolname="firstName" placeholder="Ім'я" type="text" ng-reflect-name="firstName">
<span class="help-block">Ваше ім'я, наприклад: Іван</span>
</div>
<label class="col-sm-3 control-label" for="firstName">Прізвище</label>
<div class="col-sm-9">
<input class="form-control ng-untouched ng-pristine ng-invalid" formcontrolname="lastName" placeholder="Прізвище" type="text" ng-reflect-name="lastName">
<span class="help-block">Ваше прізвище, наприклад: Іванов</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="email">Email</label>
<div class="col-sm-9">
<input class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="email" placeholder="Email" type="email" ng-reflect-name="email">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="birthDate">Дата народження</label>
<div class="col-sm-9">
<input class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="birthDate" type="date" ng-reflect-name="birthDate">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="city">Місто</label>
<div class="col-sm-9">
<input autofocus="" class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="city" placeholder="Місто" type="text" ng-reflect-name="city">
<span class="help-block">Ваше місто, наприклад: Дніпро</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Стать</label>
<div class="col-sm-6">
<select class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="sex" ng-reflect-name="sex">
<option value="2" ng-reflect-value="2">Не визначився</option>
<option value="0" ng-reflect-value="0">Жінка</option>
<option value="1" ng-reflect-value="1">Чоловік</option>
</select>
</div>
</div>
</form>
</div>
<div class="bhoechie-tab-content active">
<form class="form-horizontal ng-pristine ng-invalid ng-touched" role="form" ng-reflect-form="[object Object]">
<div class="form-group">
<label class="col-sm-3 control-label" for="firstName">Ім'я</label>
<div class="col-sm-9">
<input autofocus="" class="form-control ng-pristine ng-invalid ng-touched" formcontrolname="firstName" placeholder="Ім'я" type="text" ng-reflect-name="firstName">
<span class="help-block">Ваше ім'я, наприклад: Іван</span>
</div>
<label class="col-sm-3 control-label" for="firstName">Прізвище</label>
<div class="col-sm-9">
<input class="form-control ng-untouched ng-pristine ng-invalid" formcontrolname="lastName" placeholder="Прізвище" type="text" ng-reflect-name="lastName">
<span class="help-block">Ваше прізвище, наприклад: Іванов</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="email">Email</label>
<div class="col-sm-9">
<input class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="email" placeholder="Email" type="email" ng-reflect-name="email">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="birthDate">Дата народження</label>
<div class="col-sm-9">
<input class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="birthDate" type="date" ng-reflect-name="birthDate">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="city">Місто</label>
<div class="col-sm-9">
<input autofocus="" class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="city" placeholder="Місто" type="text" ng-reflect-name="city">
<span class="help-block">Ваше місто, наприклад: Дніпро</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Стать</label>
<div class="col-sm-6">
<select class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="sex" ng-reflect-name="sex">
<option value="2" ng-reflect-value="2">Не визначився</option>
<option value="0" ng-reflect-value="0">Жінка</option>
<option value="1" ng-reflect-value="1">Чоловік</option>
</select>
</div>
</div>
</form>
</div>
<div class="bhoechie-tab-content active"></div>
<div class="bhoechie-tab-content active">
<form class="form-horizontal ng-pristine ng-invalid ng-touched" role="form" ng-reflect-form="[object Object]">
<div class="form-group">
<label class="col-sm-3 control-label" for="city">Назва команди</label>
<div class="col-sm-9">
<input autofocus="" class="form-control ng-untouched ng-pristine ng-valid" formcontrolname="city" placeholder="Місто" type="text" ng-reflect-name="city">
<span class="help-block">Ваше місто, наприклад: Дніпро</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">Я приймаю <a href="#">умови</a>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button class="btn btn-primary btn-block" type="submit">Реєстрація</button>
</div>
</div>
</form>
</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");
});
});
