<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="col-xs-6"><div class="count"><span class="plus">+</span><input type="text" class="num"><span class="minus">-</span></div></div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
<div class="tabing">
<ul>
<li ><a href="#1" class="active"><span><i class="fa fa-plane" aria-hidden="true"></i></span> Flight</a></li>
<li ><a href="#2" ><span><i class="fa fa-bed" aria-hidden="true"></i></span> Hotels</a></li>
</ul>
<div class="tab-content">
<div id="1" class="tab1 active">
<form>
<div class="triptype">
<label class="rndTrip active"><input type="radio" name="Round" value="RoundTrip" checked> Round Trip</label>
<label class="oneTrip"><input type="radio" name="Round" value="OneWay"> OneWay </label>
</div>
<div class="col-sm-12 col-xs-12 ctrl">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<input id="airport_city" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport">
</div>
<div class="col-sm-12 col-xs-12 ctrl">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<input id="airport_city_to" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport">
</div>
<div class="col-sm-6 col-xs-6 ctrl">
<i class="fa fa-calendar" aria-hidden="true"></i>
<input id="depart" type="text" class="form-control" name="depart" value="" placeholder="dd-mm-yyyy">
</div>
<div class="col-sm-6 col-xs-6 ctrl hide_one-trip">
<i class="fa fa-calendar" aria-hidden="true"></i>
<input id="airport_city_Return" type="text" class="form-control" name="Return" value="" placeholder="dd-mm-yyyy">
</div>
<div class="select-wrap">
<div class="adult-box">
<span>Adult</span>
<select>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="adult-box">
<span>Seniors</span>
<select>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="adult-box">
<span>Children</span>
<select>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="adult-box pull-right">
<span>Class</span>
<select>
<option>Coach</option>
<option>Business</option>
<option>Economy</option>
<option>General</option>
</select>
</div>
</div>
<div class="select-wrap prefered-airline">
<div class="adult-box">
<select>
<option value="All">Airlines</option>
<option value="VW">AEROMAR</option>
<option value="3H">AIR INUIT</option>
<option value="NQ">AIR JAPAN</option>
<option value="MD">AIR MADAGASCAR</option>
<option value="AZ">ALITALIA</option>
<option value="JA">B H AIRLINES</option>
<option value="NC">NATIONAL JET SYSTEMS</option>
<option value="AQ">9 AIR</option>
<option value="9B">ACCESRAIL</option>
<option value="6U">ACG AIR CARGO</option>
<option value="JP">ADRIA AIRWAYS</option>
<option value="A3">AEGEAN AIRLINES</option>
<option value="EI">AER LINGUS</option>
<option value="NG">AERO CONTRACTORS</option>
<option value="P5">AERO REPUBLICA</option>
<option value="WV">AERO VIP COMPANHIA TRANSPORTES</option>
<option value="H4">AERO4M</option>
<option value="7L">AEROCARIBBEAN</option>
<option value="A4">AEROCOMERCIAL ORIENTE NORTE</option>
<option value="VB">AEROENLACES NACIONALES</option>
<option value="SU">AEROFLOT</option>
<option value="5P">AEROLINEA PRINCIPAL CHILE</option>
<option value="AR">AEROLINEAS ARGENTINAS</option>
<option value="2K">AEROLINEAS GALAPAGOS</option>
<option value="P4">AEROLINEAS SOSA</option>
<option value="A8">AEROLINK UGANDA LIMITED</option>
<option value="5D">AEROLITORAL</option>
<option value="AM">AEROMEXICO</option>
<option value="VH">AEROPOSTAL</option>
<option value="HN">AFGHAN JET INTERNATIONAL</option>
<option value="FK">AFRICA WEST CARGO GHD</option>
<option value="AW">AFRICA WORLD AIRLINES</option>
<option value="8U">AFRIQIYAH AIRWAYS</option>
<option value="AH">AIR ALGERIE</option>
<option value="G9">AIR ARABIA</option>
<option value="E5">AIR ARABIA EGYPT</option>
<option value="9P">AIR ARABIA JORDAN</option>
<option value="QN">AIR ARMENIA</option>
<option value="UU">AIR AUSTRAL</option>
<option value="W9">AIR BAGAN</option>
<option value="BT">AIR BALTIC</option>
<option value="AB">AIR BERLIN</option>
</select>
</div>
<div class="adult-box">
<select>
<option value="All">Economy</option>
<option value="VW">Business</option>
<option value="3H">First</option>
</select>
</div>
</div>
<div class="col-lg-12">
<input type="submit" class="srch" value="Search Flights" />
</div>
</form>
</div>
<div id="2" class="tab1">
<form>
<div class="triptype">
<label><input type="radio" name="Round" value="RoundTrip" checked> Round Trip</label>
<label><input type="radio" name="Round" value="OneWay"> OneWay </label>
</div>
<div class="col-sm-12 col-xs-12 ctrl">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<input id="airport_city" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport">
</div>
<div class="col-sm-12 col-xs-12 ctrl">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<input id="airport_city_to" type="text" class="form-control" name="airport_city" value="" placeholder="Enter a city or Airport">
</div>
<div class="col-sm-6 col-xs-6 ctrl">
<i class="fa fa-calendar" aria-hidden="true"></i>
<input id="depart" type="text" class="form-control" name="depart" value="" placeholder="dd-mm-yyyy">
</div>
<div class="col-sm-6 col-xs-6 ctrl">
<i class="fa fa-calendar" aria-hidden="true"></i>
<input id="airport_city_Return" type="text" class="form-control" name="Return" value="" placeholder="dd-mm-yyyy">
</div>
<div class="select-wrap">
<div class="adult-box">
<span>Adult</span>
<select>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="adult-box">
<span>Seniors</span>
<select>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="adult-box">
<span>Children</span>
<select>
<option>1</option>
<option>2</option>
<option>2</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="adult-box pull-right">
<span>Class</span>
<select>
<option>Coach</option>
<option>Business</option>
<option>Economy</option>
<option>General</option>
</select>
</div>
</div>
<div class="select-wrap prefered-airline">
<div class="adult-box">
<select>
<option value="All">Airlines</option>
<option value="VW">AEROMAR</option>
<option value="3H">AIR INUIT</option>
<option value="NQ">AIR JAPAN</option>
<option value="MD">AIR MADAGASCAR</option>
<option value="AZ">ALITALIA</option>
<option value="JA">B H AIRLINES</option>
<option value="NC">NATIONAL JET SYSTEMS</option>
<option value="AQ">9 AIR</option>
<option value="9B">ACCESRAIL</option>
<option value="6U">ACG AIR CARGO</option>
<option value="JP">ADRIA AIRWAYS</option>
<option value="A3">AEGEAN AIRLINES</option>
<option value="EI">AER LINGUS</option>
<option value="NG">AERO CONTRACTORS</option>
<option value="P5">AERO REPUBLICA</option>
<option value="WV">AERO VIP COMPANHIA TRANSPORTES</option>
<option value="H4">AERO4M</option>
<option value="7L">AEROCARIBBEAN</option>
<option value="A4">AEROCOMERCIAL ORIENTE NORTE</option>
<option value="VB">AEROENLACES NACIONALES</option>
<option value="SU">AEROFLOT</option>
<option value="5P">AEROLINEA PRINCIPAL CHILE</option>
<option value="AR">AEROLINEAS ARGENTINAS</option>
<option value="2K">AEROLINEAS GALAPAGOS</option>
<option value="P4">AEROLINEAS SOSA</option>
<option value="A8">AEROLINK UGANDA LIMITED</option>
<option value="5D">AEROLITORAL</option>
<option value="AM">AEROMEXICO</option>
<option value="VH">AEROPOSTAL</option>
<option value="HN">AFGHAN JET INTERNATIONAL</option>
<option value="FK">AFRICA WEST CARGO GHD</option>
<option value="AW">AFRICA WORLD AIRLINES</option>
<option value="8U">AFRIQIYAH AIRWAYS</option>
<option value="AH">AIR ALGERIE</option>
<option value="G9">AIR ARABIA</option>
<option value="E5">AIR ARABIA EGYPT</option>
<option value="9P">AIR ARABIA JORDAN</option>
<option value="QN">AIR ARMENIA</option>
<option value="UU">AIR AUSTRAL</option>
<option value="W9">AIR BAGAN</option>
<option value="BT">AIR BALTIC</option>
<option value="AB">AIR BERLIN</option>
</select>
</div>
<div class="adult-box">
<select>
<option value="All">Economy</option>
<option value="VW">Business</option>
<option value="3H">First</option>
</select>
</div>
</div>
<div class="col-lg-12">
<input type="submit" class="srch" value="Search" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; */
body{ background: url(../images/body-bg.jpg) no-repeat center center;
font-family: 'Roboto', sans-serif;
height: 100%;
position: relativ}
*:focus{outline:none}
a:hover{text-decoration:none}
.wraper{width:100%;float:left;}
.header{width:100%;float:left;background:#fff;padding:10px 0; box-shadow: 0 0 5px #000;}
.tabing{width:100%; float:left;}
.tabing ul{margin:0px; padding:0px;list-style:none;width:20%; float: left;}
.tabing ul li{ float: left;
text-align: left;background: rgba(10,22,37,.8);
width: 100%;margin-bottom:1px;
}
.tabing ul li a{display: block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
padding: 10px 20px;
cursor: pointer;
text-decoration: none;
color: #fff;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 17px;
text-align: center;}
.tabing ul li a.active {}
.tabing ul li a span { display: block;
text-align: center;
color: #fff;
font-size: 28px;}
.tab1{float: left;width: 100%;color: #fff;text-align: left;font-size: 20px;line-height: 25px;display: none;text-transform: capitalize;background: rgba(10,22,37,.8);color:#000;}
.tab-content {float:left; width:80%;}
.tab-content .triptype label{ font: 400 14px/20px "Roboto";
width: auto;
display: inline-block;
color: #fff;
text-transform: uppercase;
margin: 2px 10px;
padding-bottom: 6px;cursor:pointer;}
.tab-content .triptype label.active{
border-bottom: 2px solid #ff6600;
}
.tab-content .input-group label{font: 400 15px/28px "Roboto";margin: 0;width: 60px;text-align: left;}
.triptype{width: 100%;
float: left;
text-align: center;
margin: 17px 0;}
.triptype input[type="radio"]{ font-size: 0;
position: absolute;
left: -9999px;}
.ctrl i{ position: absolute;
top: 9px;
left: 24px;
color: #ccc;
font-size: 23px;}
.ctrl .form-control{ border: none;
border-radius: 0;
margin-bottom: 20px;
height: auto;
padding: 8px 8px 8px 40px;
line-height: 25px;}
.tab1.active{display:block}
.select-wrap{ width: 100%;
float: left;
padding: 0 15px;}
.select-wrap .adult-box{width:22%; float:left;margin-right:16px;}
.select-wrap.prefered-airline .adult-box{width:48%; float:left;margin-right:16px;margin-top:20px;}
.select-wrap .adult-box:last-child{margin-right:0px;}
.select-wrap .adult-box select{ width: 100%;
padding: 10px 6px 10px 5px;
border-radius: 0;
font: 400 12px/14px "Roboto";
margin-top: 2px;
border: none;}
.select-wrap span {display:block ; font: 400 14px/15px "Roboto"; margin:0px 0 0 0; text-align: left;width:100%;color:#fff;}
.srch{ border: none;
background: #ff6600;
color: #fff;
padding: 6px 15px;
margin-top: 10px;
font: 400 20px/26px "Roboto";
width: 100%;
text-transform: uppercase;margin-bottom:15px;}
/*calender*/
.ui-datepicker{padding:0px;border-radius:0px;}
.ui-widget-header{background:transparent;border:none}
.ui-datepicker td span, .ui-datepicker td a{text-align:center;}
.ui-datepicker td {background:transparent;border:none}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus ,.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
border: 0;background: transparent;font-weight: normal;color: #2b2b2b;}
.ui-state-default.ui-state-active{background:#ff6600;color:#fff}
.ui-state-default.ui-state-highlight{background:#082d45;color:#fff}
.ui-datepicker-multi .ui-datepicker-buttonpane{display:none;}
.ui-datepicker-multi-2 .ui-datepicker-group {width: 50%;border-right: 1px solid #ccc;}
$(document).ready(function() {
$('.tabing a').click(function (e) {
e.stopPropagation();
e.preventDefault();
var tabcont = $(this).attr('href');
$('.tabing a').removeClass('active');
$(this).addClass('active');
$('.tab1').fadeOut(0);
$(tabcont).fadeIn(200);
});
$('.tab-content .triptype label').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
$('.tab-content .triptype label.oneTrip ').click(function(){
$('.hide_one-trip').hide();
});
$('.tab-content .triptype label.rndTrip ').click(function(){
$('.hide_one-trip').show();
});
});
$( function() {
$( "#depart" ).datepicker({
numberOfMonths: 2,
showButtonPanel: true
});
} );
<script>
var num = 0
$(".num").val(num);
$(".plus").click(function(){
num = num + 1;
if (num >10) {
num = 10
$(this).parents(".col-xs-4").find(".message").val("Maximum Limit");
}
else {
$(this).parents(".col-xs-4").find(".message").val("");
}
$(this).next(".num").val(num);
});
$(".minus").click(function(){
num = num - 1;
if (num < 0) {
num = 0
$(this).parents(".col-xs-4").find(".message").val("Minimum Limit");
}
else {
$(this).parents(".col-xs-4").find(".message").val("");
}
$(this).prev(".num").val(num);
});
