Ivan Vilanculo
Reputation: 668
Why bootstrap shows 2 tabs at the same time?
I'm developing a website with using bootsrap v4, and I'm struggling using tabs. As you may see when you click the 3rd or the last tab, and then click the first tab it shows 2 tabs at the same time and also when you keep clicking and alternating those tabs the problem goes away by it self.
What I'm doing wrong?
jsFiddle
body {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #868e96;
text-align: left;
}
.search-tabs>h1 {
font-weight: normal;
margin-bottom: 15px;
}
.search-tabs .tabbable>.nav-tabs li {
margin-bottom: -1px;
margin-right: 5px;
z-index: 0;
}
.search-tabs .tabbable>.nav-tabs li a.active {
background-color: #FF9F00;
}
.search-tabs .tabbable>.nav-tabs li a {
background: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.4);
border: none !important;
color: #fff;
position: relative;
display: block;
padding: 10px 15px;
border-radius: 0;
}
.search-tabs .tabbable>.nav-tabs li a.active::before {
content: "";
display: block;
position: absolute;
background-color: #FF9F00;
width: 100%;
height: 5px;
top: -5px;
left: 0;
}
.search-tabs .tabbable>.nav-tabs li a .icon {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
margin-right: 2px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
text-align: center;
transition: all 0.2s ease-in-out;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<section class="search-tabs">
<h1>Está na hora de <b><span style="" class="morphext"><span class="animated flipInX">se perder</span></span></b></h1>
<section class="tabbable">
<ul class="nav nav-tabs">
<li class="nav-item"><a data-toggle="tab" href="#hotels-tab" class="nav-link active"><i class="icon mdi mdi-hotel"></i> <span class="hidden-sm-down">Hoteis</span></a></li>
<li class="nav-item"><a data-toggle="tab" href="#flights-tab" class="nav-link"><i class="icon fa fa-plane"></i> <span class="hidden-sm-down">Voos</span></a></li>
<li class="nav-item"><a data-toggle="tab" href="#events-tab" class="nav-link"><i class="icon fa fa-bolt"></i> <span class="hidden-sm-down">Actividades</span></a></li>
<li class="nav-item"><a data-toggle="tab" href="#rentcar-tab" class="nav-link"><i class="icon mdi mdi-car-hatchback"></i> <span class="hidden-sm-down">Rent Car</span></a></li>
</ul>
<section class="tab-content">
<section id="hotels-tab" role="tabpanel" class="tab-pane fade show active">
<section class="app-loading" style="min-height: 200px; display: none;"></section>
<section>
<h2>Pesquisar Hoteis</h2>
<form action="//hotels/search" method="get">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde vais?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 700px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Chegada - Saida</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos </label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças</label>
<select class="custom-select form-control">
<option selected="selected">0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Hoteis</button>
</form>
</section>
</section>
<section id="flights-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar voos baratos</h2>
<form action="/flights/-" method="get">
<section class="row">
<section class="col-md-12"><span class="trip-switch active">Ida e Volta</span> <span class="trip-switch">Só Ida</span></section>
</section>
<section class="row">
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>De onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Para onde?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Partida - Volta</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos</label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças </label>
<select class="custom-select form-control">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar voos</button>
</form>
</section>
</section>
<section id="events-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Hoteis</h2>
<form action="/activities//search" method="get">
<section class="row">
<section class="col-md-4">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-5">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Check in - Check out</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group">
<label>O que procura?</label>
<select class="form-control custom-select">
<option value="">Tudo</option>
<option value="1">Eventos</option>
<option value="2">Excurções</option>
<option value="2">Actividades</option>
<option value="3">Outros</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Actividades</button>
</form>
</section>
</section>
<section id="rentcar-tab" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Viaturas</h2>
<form action="/rent-car//search" method="get">
<section class="row">
<section if="hideLocation" class="col-md-4">
<section class="form-group form-group-icon-left"><i class="mdi mdi-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-8">
<section class="row">
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Quando?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-08-25 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Ate quanto?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-09-01 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Viaturas</button>
</form>
</section>
</section>
</section>
</section>
</section>Upvotes: 1
Views: 624
Answers (1)
Shiladitya
Reputation: 12181
Here you go with a solution ( you may say it a work around ) https://jsfiddle.net/k0uv976k/5/
$('a[data-toggle="tab"]').click(function(){
$($(this).data('href')).show().addClass('show active').siblings().hide();
});body {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #868e96;
text-align: left;
}
.search-tabs > h1 {
font-weight: normal;
margin-bottom: 15px;
}
.search-tabs .tabbable > .nav-tabs li {
margin-bottom: -1px;
margin-right: 5px;
z-index: 0;
}
.search-tabs .tabbable > .nav-tabs li a.active {
background-color: #FF9F00;
}
.search-tabs .tabbable > .nav-tabs li a {
background: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.4);
border: none !important;
color: #fff;
position: relative;
display: block;
padding: 10px 15px;
border-radius: 0;
}
.search-tabs .tabbable > .nav-tabs li a.active::before {
content: "";
display: block;
position: absolute;
background-color: #FF9F00;
width: 100%;
height: 5px;
top: -5px;
left: 0;
}
.search-tabs .tabbable > .nav-tabs li a .icon {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
margin-right: 2px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
text-align: center;
transition: all 0.2s ease-in-out;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<section class="search-tabs">
<h1>Está na hora de <b><span style="" class="morphext"><span class="animated flipInX">se perder</span></span></b></h1>
<section class="tabbable">
<ul class="nav nav-tabs">
<li class="nav-item"><a data-toggle="tab" data-href="#hotels-tab" class="nav-link active"><i class="icon mdi mdi-hotel"></i> <span class="hidden-sm-down">Hoteis</span></a></li>
<li class="nav-item"><a data-toggle="tab" data-href="#flights-tab" class="nav-link"><i class="icon fa fa-plane"></i> <span class="hidden-sm-down">Voos</span></a></li>
<li class="nav-item"><a data-toggle="tab" data-href="#events-tab" class="nav-link"><i class="icon fa fa-bolt"></i> <span class="hidden-sm-down">Actividades</span></a></li>
<li class="nav-item"><a data-toggle="tab" data-href="#rentcar-tab" class="nav-link"><i class="icon mdi mdi-car-hatchback"></i> <span class="hidden-sm-down">Rent Car</span></a></li>
</ul>
<section class="tab-content">
<section id="hotels-tab" role="tabpanel" class="tab-pane fade show active">
<section class="app-loading" style="min-height: 200px; display: none;"></section>
<section>
<h2>Pesquisar Hoteis</h2>
<form action="//hotels/search" method="get">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde vais?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 700px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Chegada - Saida</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos </label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças</label>
<select class="custom-select form-control">
<option selected="selected">0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option value="4+">4 / +</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Hoteis</button>
</form>
</section>
</section>
<section id="flights-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar voos baratos</h2>
<form action="/flights/-" method="get">
<section class="row">
<section class="col-md-12"><span class="trip-switch active">Ida e Volta</span> <span class="trip-switch">Só Ida</span></section>
</section>
<section class="row">
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>De onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-6">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Para onde?</label>
<select id="destination" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full has-options" style="">
<input autocomplete="off" tabindex="" id="destination-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
</section>
<section class="row">
<section class="col-md-6">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Partida - Volta</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Adultos</label>
<select class="custom-select form-control">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
<section class="col-md-3">
<section class="form-group form-group-icon-left"><i class="fa fa-user input-icon"></i>
<label>Crianças </label>
<select class="custom-select form-control">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar voos</button>
</form>
</section>
</section>
<section id="events-tab" role="tabpanel" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Hoteis</h2>
<form action="/activities//search" method="get">
<section class="row">
<section class="col-md-4">
<section class="form-group form-group-icon-left"><i class="fa fa-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-5">
<section data-v-d1911898="" class="form-group range-piker">
<label data-v-d1911898="">Check in - Check out</label>
<section data-v-d1911898="" style="position: relative;">
<section data-v-d1911898="" class="date-range-view">
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 25 2017</section>
<section data-v-d1911898="" class="input"><i data-v-d1911898="" class="fa fa-calendar"></i> Ago, 28 2017</section>
</section>
<input data-v-d1911898="" class="form-control calendar-instance-input flatpickr-input" readonly="readonly" type="text">
</section>
</section>
</section>
<section class="col-md-3">
<section class="form-group">
<label>O que procura?</label>
<select class="form-control custom-select">
<option value="">Tudo</option>
<option value="1">Eventos</option>
<option value="2">Excurções</option>
<option value="2">Actividades</option>
<option value="3">Outros</option>
</select>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Actividades</button>
</form>
</section>
</section>
<section id="rentcar-tab" aria-expanded="false" class="tab-pane fade">
<section>
<h2>Pesquisar Viaturas</h2>
<form action="/rent-car//search" method="get">
<section class="row">
<section if="hideLocation" class="col-md-4">
<section class="form-group form-group-icon-left"><i class="mdi mdi-map-marker input-icon"></i>
<label>Onde?</label>
<select id="origin" data-search="hotel_place" class="selectize-place selectized" tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control selectize-place single">
<div class="selectize-input items not-full" style="">
<input autocomplete="off" tabindex="" id="origin-selectized" placeholder="Cidade, Hotel ou ponto de interesse" style="width: 204px;" type="text">
</div>
<div class="selectize-dropdown single selectize-place" style="display: none; width: 100px; top: 38px; left: 0px;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</section>
</section>
<section class="col-md-8">
<section class="row">
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Quando?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-08-25 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
<section class="col-md-6">
<section class="form-group date-time-picker form-group-icon-left"><i class="mdi mdi-calendar-clock input-icon"></i>
<label>Ate quanto?</label>
<input readonly="readonly" class="form-control flatpickr-input" value="2017-09-01 12:00" type="hidden">
<input class="form-control flatpickr-input form-control input" placeholder="" readonly="readonly" type="text">
</section>
</section>
</section>
</section>
</section>
<button class="btn btn-primary">Pesquisar Viaturas</button>
</form>
</section>
</section>
</section>
</section>
</section>I've used jQuery to active tabs and changed href to data-href in HTML.
Updated answer requested by OP
Here is the updated answer https://jsfiddle.net/k0uv976k/6/
Hope this will solve your problem.
Upvotes: 2
Related Questions
- Why bootstrap 3 tabs not working properly?
- Bootstrap hover tabs showing multiple tabs
- inappropriate behaviour on bootstrap tabs
- Why is tab1 content is appearing in the other tabs?
- Show content twice - Bootstrap Tabs
- Initial Page Load Shows contents of both tabs
- bootstrap tab not working separately
- Two Bootstrap tabs appear active at once
- Bootstrap tabs are shown together
- Bootstrap v3.0.2 Tabs not functioning correctly