Here i have explained how to create manual tabs using jquery and css.

Step 1: Attach below jQuery file inside head tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Step 2: Add below HTML Markup inside body tag.

<section class="bkngTypeOptions">
<div class="bookingTypeInner">
<span id="bookYourCar" class="optionTabActive">  BOOK YOUR CAR </span>
<span id="bookYourLimo" class="optionTab"> BOOK YOUR LIMO   </span>
</div>
</section>

<div id="buc-container">
<h5> BOOK YOUR CAR </h5>
<p>content will goes here... </p>
</div>
<div id="bul-container" style="display:none">
<h5> BOOK YOUR LIMO </h5>
<p>content will goes here... </p>
 </div>

Step 3: Add the below CSS with style tag.

.bkngTypeOptions {
	webkit-box-pack: space-around;
	-webkit-justify-content: space-around;
	-moz-justify-content: space-around;
	-ms-justify-content: space-around;
	-ms-flex-pack: space-around;
	justify-content: space-around;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: row;
	-webkit-box-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	padding: .625em;
	margin-top: .313em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: -ms-flex;
	display: flex;
	border-bottom: none !important
}

.bkngTypeOptions .optionTabActive {
	background: #1a73e8;
	padding-top: .625em;
	padding-bottom: .625em;
	padding-left: .625em;
	padding-right: .625em;
	font-size: .875em;
	line-height: 1;
	color: #fff;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	flex: 1;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	font-weight: bold;
	font-style: normal;
	cursor: pointer;
}

.bkngTypeOptions .optionTab {
	padding-top: .313em;
	padding-bottom: .313em;
	padding-left: .625em;
	padding-right: .625em;
	font-size: .875em;
	line-height: 1;
	color: #666;
	flex: 1;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	font-weight: 500;
	cursor: pointer;
}

.bookingTypeInner {
	background-color: #f6f1f1;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: -ms-flex;
	display: flex;
	-webkit-box-orient: row;
	-webkit-box-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	font-family: quicksand;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	flex: 1;
}

Step 4: Add the below javascript with script tag.

   $(document).ready(function () {   //ready function starts
    
  $("#bookYourCar").click(function(){
	  $("#bul-container").hide();
	  $("#buc-container").show();	  
	  
	  $("#bookYourCar").addClass("optionTabActive");
	  $("#bookYourCar").removeClass("optionTab");
	  	  	  
	  $("#bookYourLimo").addClass("optionTab");
	  $("#bookYourLimo").removeClass("optionTabActive");		
  });
 
 
 
  $("#bookYourLimo").click(function(){
	  $("#bul-container").show();
	  $("#buc-container").hide();	    
	  
	  $("#bookYourLimo").addClass("optionTabActive");
	  $("#bookYourLimo").removeClass("optionTab");
	    	  
	  $("#bookYourCar").addClass("optionTab");
	  $("#bookYourCar").removeClass("optionTabActive");	  	   	   	   
  });

}); //ready function ends 

Screenshot

Add Comments