Hover tabs with column wrapper

Developer
Kevin
Size
7,014 Kb
Views
36,432
  1. Hover tabs with column wrapper Previews
  2. Hover tabs with column wrapper HTML Codes
  3. Hover tabs with column wrapper CSS Codes
  4. Hover tabs with column wrapper JS Codes

How do I make an hover tabs with column wrapper?

What is a hover tabs with column wrapper? How do you make a hover tabs with column wrapper? This script and codes were developed by Kevin on 12 October 2022, Wednesday.

Hover tabs with column wrapper Previews
IQ Test

Hover tabs with column wrapper - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hover tabs with column wrapper</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="nav--mobile">	<div class="nav--top navbar navbar-default">	<div class="navbar-header container">	<a class="navbar-brand" href="#">LOGO</a>	<button type="button" class="hammy navbar-toggle collapsed " data-toggle="collapse" data-target="#mobile-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>	<div class="mobile--bottom pull-right">	<button type="button" class="btn btn-default navbar-btn btn-three">Sign Up</button>	<button type="button" class="btn btn-default navbar-btn btn-one">Login</button>	<button type="button" class="btn btn-default navbar-btn btn-two">Rate Inquiry</button>	<button type="button" class="btn btn-default navbar-btn btn-two">Booking</button>	</div>	</div>	<div class="collapse navbar-collapse" id="mobile-nav">	<ul class="mobile--menu nav navbar-nav hidden-sm hidden-md hidden-lg">	<li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Service <span class="caret"></span></a>	<ul class="dropdown-menu">	<li><a href="#">All Service</a></li>	<li><a href="#">Asia - Africa &amp; Middle East</a></li>	<li><a href="#">Asia - Europe</a></li>	<li><a href="#">Asia - Mediterranean</a></li>	<li><a href="#">Asia - Oceania</a></li>	<li><a href="#">Asia - Latin/South America</a></li>	<li><a href="#">Europe - Africa</a></li>	<li><a href="#">Europe - North America</a></li>	<li><a href="#">Intra - Asia</a></li>	<li><a href="#">Latin/South America</a></li>	</ul>	</li>	<li><a href="#">Scheudle Query</a></li>	<li><a href="#">Tariffs</a></li>	<li><a href="#">About</a></li>	<li><a href="#">Contact</a></li>	<li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Region <span class="caret"></span></a>	<ul class="dropdown-menu">	<li><a href="#">All Service</a></li>	<li><a href="#">Asia - Africa &amp; Middle East</a></li>	<li><a href="#">Asia - Europe</a></li>	<li><a href="#">Asia - Mediterranean</a></li>	</ul>	</li>	</ul>	</div>	</div>
</section>
<!-- desktop nav -->
<section id="nav--desktop" class="hidden-xs">	<!-- Begin Navbar -->	<nav class="nav--bottom navbar container">	<ul class="nav navbar-nav nav--bottom-links">	<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>	<li class="dropdown menu--large">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<b class="caret"></b></a>	<!-- MegaMenu -->	<div class="dropdown-menu row" id="megamenu">	<div class="col-sm-12 col-md-6">	<ul>	<h5>Network</h5>	<li class="divider"></li>	</ul>	<div class="col-sm-12 col-md-6 megamenu--links">	<ul>	<li><a href="# ">All Service</a></li>	<li><a href="# ">Asia - Africa &amp; Middle East</a></li>	<li><a href="# ">Asia - Europe</a></li>	<li><a href="# ">Asia - Mediterranean</a></li>	<li><a href="# ">Asia - North America</a></li>	<li><a href="# ">Asia - Oceania</a></li>	</ul>	</div>	<div class="col-sm-12 col-md-6 megamenu--links">	<ul>	<li><a href="# ">Asia - Latin/South America</a></li>	<li><a href="# ">Europe - Africa</a></li>	<li><a href="# ">Europe - North America</a></li>	<li><a href="# ">Intra - Asia</a></li>	<li><a href="# ">Latin/South America</a></li>	</ul>	</div>	</div>	<div class="col-md-6 megamenu--right">	<ul>	<li><img src="https://i.imgur.com/42ZoUEa.png" alt="reefer services"></li>	<li><img src="https://i.imgur.com/IOzUnke.png" alt="special services"></li>	</ul>	</div>	</div>	</li>	<!-- End of MegaMenu -->	<li><a href="#">Track N Trace</a></li>	<li><a href="#">Schedule Query</a></li>	<li><a href="#">Tariffs</a></li>	<li><a href="#">About</a></li>	<li><a href="#">Contact</a></li>	<li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Region <span class="caret"></span></a>	<ul class="dropdown-menu menu--lastchild" role="menu">	<li><a href="#">Action</a></li>	<li><a href="#">Another action</a></li>	<li><a href="#">Something else here</a></li>	<li class="divider"></li>	<li><a href="#">Separated link</a></li>	<li class="divider"></li>	<li><a href="#">One more separated link</a></li>	</ul>	</li>	</ul>	</nav>
</section>
<!--jumbotron-->
<div class="jumbotron">	<h3 class="hidden-sm hidden-md hidden-lg"><span>Count on MOL</span> to deliver the performance data you can use.</h3>	<div class="container">	<div class="row">	<div class="login--content hidden-xs col-sm-6 col-md-6 col-lg-6">	<h3>MOL Customer Login</h3>	<div class="container">	<form>	<div class="row">	<div class="form-group col-xs-6">	<label class="sr-only" for="exampleInputEmail3">Username</label>	<input type="text" class="input--bar form-control" id="username" placeholder="Username">	</div>	<div class="form-group col-xs-6">	<label class="sr-only" for="exampleInputPassword3">Password</label>	<input type="password" class="input--bar form-control" id="email" placeholder="Password">	</div>	</div>	<div class="row login--content-bottom">	<div class="form-group col-xs-6">	<select class="form-control input--bar"> <option hidden>I'd like to:</option> <option>Go to my dashboard</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>	</div>	<div class="form-group col-xs-6">	<div class="checkbox">	<label> <input type="checkbox"> Remember me </label>	</div>	</div>	</div>	<div class="row">	<div class="form-group col-xs-offset-8 col-xs-2 ">	<button type="submit" class="submit btn btn-default">Submit</button>	</div>	</div>	</form>	</div>	</div>	<!--TABS-->	<div class="generic--tabs col-xs-12 col-sm-6 col-md-6" id="js--generic-tabs">	<ul class="tabs">	<li class="hidden-sm hidden-md hidden-lg">	<a href="#tab--first" alt="login">Login</a>	</li>	<li>	<a href="#tab--second" alt="track">Track &amp; Trace</a>	</li>	<li>	<a href="#tab--third" alt="ingredients">Schedule Query</a>	</li>	</ul>	<!--first tab-->	<div id="tab--first" class="tab--content hidden-sm hidden-md hidden-lg">	<h3>MOL Customer Login</h3>	<form>	<div class="row">	<div class="form-group col-xs-6">	<label class="sr-only" for="exampleInputEmail3">Username</label>	<input type="text" class="input--bar form-control" id="username" placeholder="Username">	</div>	<div class="form-group col-xs-6">	<label class="sr-only" for="exampleInputPassword3">Password</label>	<input type="password" class="input--bar form-control" id="email" placeholder="Password">	</div>	</div>	<div class="row login--content-bottom">	<div class="form-group col-xs-6">	<select class="form-control input--bar"> <option hidden>I'd like to:</option> <option>Go to my dashboard</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>	</div>	<div class="form-group col-xs-6">	<div class="checkbox">	<label> <input type="checkbox"> Remember me </label>	</div>	</div>	</div>	<div class="row">	<div class="form-group col-xs-offset-8 col-xs-2 ">	<button type="submit" class="submit btn btn-default">Submit</button>	</div>	</div>	</form>	</div>	<!--second tab-->	<div id="tab--second" class="tab--content">	<form>	<h3>Please enter your tracking number</h3>	<div class="row">	<div class="col-xs-12">	<label class="sr-only" for="exampleInputEmail3"></label>	<input type="text" class="input--bar form-control" id="booking" placeholder="Booking #, B/L #, Container #">	</div>	</div>	<div class="row">	<div class="form-group col-xs-offset-8 col-xs-2">	<button type="submit" class="submit btn btn-default">Submit</button>	</div>	</div>	</form>	</div>	<!--third tab-->	<div id="tab--third" class="tab--content">	<p>third tab</p>	</div>	</div>	</div>	</div>
</div>
<!-- news -->
<section class="news">	<div class="middle container-fluid ">	<div class="row">	<div class="middle--left col-xs-12 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 ">	<div class="middle--left-content">	<div class="col-xs-12 col-sm-12 col-md-6">	<h3>Advisories</h3>	</div>	<div class="col-xs-12">	<div class="input-group">	<input type="text" class="form-control input--bar" placeholder="search" name="srch-term">	<div class="input-group-btn">	<button class="btn btn-default icon--search" type="submit"><i class="glyphicon glyphicon-search"></i></button>	</div>	</div>	</div>	<div class="col-xs-12">	<ul class="middle--links">	<li><a href="#">Asia-Europe Westbound General Rate Increase (GRI)</a></li>	<li><a href="#">New Customs Regulations For Import of IMDG Cargo into Saudi Arabia</a></li>	<li><a href="#">MOL South Africa (PTY) Ltd BBBEE Certificate</a></li>	<li><a href="#">Update (No.7) - SW2 Service - Engine Room Fire on Maersk Lebu</a></li>	</ul>	</div>	</div>	</div>	<div class="middle--right col-xs-12 col-sm-4 col-md-4">	<div class="middle--right-content">	<div class="col-xs-12 col-sm-12 col-md-6">	<h3>News Releases</h3>	</div>	<div class="col-xs-12">	<div class="input-group">	<input type="text" class="form-control input--bar" placeholder="search" name="srch-term">	<div class="input-group-btn">	<button class="btn btn-default icon--search" type="submit"><i class="glyphicon glyphicon-search"></i></button>	</div>	</div>	</div>	<div class="col-xs-12">	<ul class="middle--links">	<li><a href="#">Newbuilding LNG Carrier for Kansai Electric Power Named LNG JUROJIN</a></li>	<li><a href="#">MOL Containership Rescues Castaways - All two survivors rescued off Canary...</a></li>	<li><a href="#">MOL Introduces Tablet Computer System for ONboard Inspection, Enhancement of..</a></li>	</ul>	</div>	</div>	</div>	</div>	</div>	<div class="news container-fluid hidden-xs">	<div class="news--left col-sm-6 col-md-6">	</div>	<div class="news--right col-sm-6 col-md-6">	</div>	</div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hover tabs with column wrapper - Script Codes CSS Codes

/* codepen sometimes doesn't like to load the background image :-/ */
/*----------------------------
[Table of contents]
1. body 1.a buttons
2. header
3. navigation 3.a navigation megaMenu
4. jumbotron
5. action boxes 5.a login 5.b tabs
6. news section 6.a news background
7. graphics content section 7.a graphics left content 7.b graphics right content
8. sub-page-specific 8.a sub-header 8.b sub-content 8.i sub-content-left 8.ii sub-content-right
9. sitelinks
10. footer
11. bootstrap overrides
12. media queries 12.a iphone 5 12.b ipad air 12.c desktop
---------------------------*/
/* 1.body -----------------*/
html,
body {	margin: 0 auto;	padding: 0;	width: 100%;	height: auto;	overflow-x: hidden;	overflow-y: scroll;	-webkit-overflow-scrolling: touch;
}
ul {	list-style-type: none;
}
input:focus {	outline: none;
}
select::-ms-expand {	width: 12px;	border: none;	background: #fff;
}
.form-inline .form-group input {	width: 100%;
}
.form-group {	float: left;
}
/* 1.a buttons -----------------*/
.btn-one,
.btn-two,
.btn-three {	border: 0;	padding: 0.5em;	border-radius: 0;	cursor: pointer;
}
.btn-one,
.btn-one:hover,
.btn-two,
.btn-two:hover {	color: #fff;
}
.btn-one,
.btn-one:hover {	background: #f78a39;
}
.btn-two,
.btn-two:hover {	background: #005396;
}
.btn-three,
.btn-three:hover {	color: #005396;
}
.btn-three,
.btn-three:hover {	background: transparent;
}
.hammy {	border: 0;
}
.submit {	color: #fff;	border: none;	background: #005396;	padding: 0.4em 1.5em;	border-radius: 0;	cursor: pointer;
}
/* 2. header ----------------------------*/
.nav--top {	border: none;	padding: 1em 0;	margin-bottom: 0;	background: #fff;
}
.nav--top > div {	float: none;
}
/* input bar */
.icon--search {	color: #fff;	border-radius: 0;	background: #f78a39;	border: 1px solid #fff;
}
.icon--search:hover {	background: #005396;
}
.input--bar {	border-radius: 0;	border: none;
}
.input--bar:focus {	outline: none;
}
/* 3. navigation ------------------*/
.nav--bottom {	color: #fff;	width: auto;	margin: 0 auto;	border-radius: 0;	text-align: center;	background: #005396;	height: 100%;
}
.nav--bottom a {	color: #fff;	font-size: 16px;
}
.nav--bottom li a:focus,
.nav--bottom li a:hover {	background: #f78a39;
}
.menu--lastchild {	right: 0;	left: auto;	background: #efefef;	border-top: 0;
}
.menu--lastchild li > a {	color: #005396 !important;
}
/* 3.a navigation-megamenu ---------*/
.menu--large {	position: static !important;
}
#megamenu {	width: 90%;	padding: 1em;	left: auto;	margin: 0 auto;	background: #efefef;	border-top: 0;
}
#megamenu h5 {	color: #005396;
}
#megamenu ul {	margin: 0;	padding: 0 0.5em;
}
#megamenu > ul > li {	list-style: none;	color: #005396;
}
#megamenu > ul > li > a {	color: #005396;	display: block;	line-height: 1.5;	padding: 3px 20px;	font-weight: normal;	white-space: normal;
}
#megamenu .megamenu--links {	padding: 0;
}
#megamenu .megamenu--links a {	color: #4481b2;
}
#megamenu .megamenu--links a:hover {	background: transparent;
}
#megamenu .megamenu--links ul li:before {	content: '+';	color: #005396;	padding-right: 8px;
}
#megamenu .megamenu--right {	margin: 0 auto;	border-left: 1px solid #e5e5e5;	padding: 0;
}
#megamenu .megamenu--right ul {	padding-left: 0;
}
#megamenu .megamenu--right img {	margin: 0.5em;	max-width: 100%;
}
/* 4. jumbotron ----------------*/
.jumbotron {	background: linear-gradient( rgba(4, 84, 149, 0.8), rgba(4, 84, 149, 0.8)), url('http://res.cloudinary.com/djp31ivte/image/upload/v1495052861/barge_sugbr8.jpg');	background-size: contain;	background-repeat: no-repeat;	background-attachment: fixed;	background-position: 50% 50%;
}
.jumbotron h3 {	color: #fff;	font-size: 1.2em;
}
.jumbotron span {	color: #e6d409;
}
/* 5. action boxes --------------*/
.jumbotron > .container {	padding: 0;	margin: 4em auto 0;
}
/* 5.a login */
.login--content {	bottom: 0;	height: 220px;	background: #f78a39;	border-bottom: 4px solid #005396;	box-shadow: inset -10px 0px 11px 0px rgba(50, 50, 50, 0.22);
}
.login--content form {	margin-top: 1em;
}
.login--content h3 {	color: #fff;	padding-bottom: 5px;	border-bottom: 1px solid #fff;
}
/* 5.b tabs -----------------------*/
.generic--tabs {	padding: 0;
}
.generic--tabs h3 {	color: #102f51;
}
/*tab styles*/
.generic--tabs ul {	margin: 0;	padding: 0;	display: flex;	display: -webkit-box;	display: -ms-flexbox;	display: -webkit-flex;	overflow: hidden;
}
.generic--tabs ul li {	width: 33.33%;	background: #efefef;	margin-right: 0.3em;	display: inline-block;
}
/*tab link styles*/
.generic--tabs ul li a {	padding: 1em;	display: block;	color: #4481b2;	text-align: center;	text-decoration: none;
}
/*active tab styles*/
.generic--tabs ul li.active {	background: #fff;
}
.generic--tabs ul li.active a {	color: #005396;
}
/*tab content styles*/
.generic--tabs .tab--content {	height: 172px;	color: #005396;	background: #fff;	padding: 1em 3em;	border-bottom: 4px solid #005396;
}
.generic--tabs .tab--content h1 {	margin-top: 0;
}
.generic--tabs .tab--content button {	margin-top: 2em;
}
/* 6. news section -----------------*/
.middle h3 {	color: #fff;	margin: 0.5em auto;	white-space: nowrap;
}
.middle a {	color: #fff;
}
.middle--left-content,
.middle--right-content {	padding: 0;	margin: 0.5em auto;
}
.middle--left-content {	background: #005396;
}
.middle--right-content {	background: #4481b2;
}
.middle--links {	padding: 0;	margin: 2em auto;
}
/** 6.a news--background **/
.news {	padding: 0;	position: relative;
}
.news--left {	background: #005396;	border-top: 1px solid #fff;
}
.news--right {	background: #4481b2;	border-top: 1px solid #fff;
}
/* 7. graphics section ---------------*/
.graphics {	height: 100%;
}
.graphics--left,
.graphics--right {	padding: 1em;	text-align: center;
}
/* 7.a graphics left content -----------*/
.graphics--left {	background: #efefef;	vertical-align: middle;	margin: 0 auto;
}
.graphics--left .carousel-indicators {	bottom: 0;
}
.graphics--left img {	border: 4px solid #f78a39;
}
/* 7.b graphics right content -----------*/
.graphics--right {	background: #fff;
}
.graphics--right .content-list {	width: 25%;	float: left;	color: #fff;	height: 96px;	line-height: 96px;	background: #f78a39;	display: block;
}
.graphics--right img {	display: block;
}
.graphics--right > div {	margin: 0 auto 0.4em auto;
}
/* 11. bootstrap overrides ----------------------*/
/* navbar */
.navbar {	min-height: 100%;	border: 0;
}
/* logo */
.navbar-brand {	padding: 0;
}
.navbar-brand img {	height: 100%;	width: auto;	padding-left: 1em;
}
/* hammy menu*/
.navbar-toggle .icon-bar {	width: 30px;	height: 3px;
}
/* mobile menu icon*/
.navbar-default .navbar-toggle .icon-bar {	background-color: #005396;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {	background: transparent;
}
.nav > li {	background: #005396;
}
.nav > li a {	color: #fff;
}
.navbar-header {	padding: 1em;
}
/* mobile menu */
.navbar-default .navbar-nav .open .dropdown-menu > li > a,
.navbar-default .navbar-nav > li > a {	color: #fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {	background: #f78a39;	color: #fff;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {	color: #005396;
}
.navbar-default .navbar-nav .open .dropdown-menu li a:before {	content: '+';	color: #fff;	padding-right: 8px;
}
/* 12. media queries -------------------*/
/* 12.a iphone 5 -----------------------*/
@media only screen and (min-width: 320px) and (max-width: 767px) {	.jumbotron > .container {	margin-bottom: 0;	}	body {	text-align: center;	}	.mobile--bottom {	padding: 2em 0.7em 0 0;	}	.jumbotron {	margin: 0 auto;	}	.generic--tabs ul li {	font-size: 12px;	line-height: 12px;	}	.generic--tabs .tab--content {	height: 240px;	}	.generic--tabs ul li.active,	.generic--tabs .tab--content {	background: #f78a39;	}	.generic--tabs .tab--content h3,	.generic--tabs .tab--content label,	.generic--tabs ul li.active a {	color: #fff;	}	.generic--tabs .tab--content h3 {	font-size: 16px;	}	.middle {	width: 100%;	text-align: left;	background: transparent;	}	.middle h3 {	text-align: center;	}	.middle--left,	.middle--right {	margin: 0 auto;	}	.middle--left {	background: #005396;	}	.middle--right {	background: #4481b2;	}	.graphics--right img {	width: 75%;	}	.graphics--right .content-list {	height: 72px;	line-height: 72px;	padding: 0 10px;	}	.graphics--right .content-list p {	font-size: 0.7em;	}
}
/* 12.b ipad air ----------------------*/
@media only screen and (min-width:768px) and (max-width: 959px) {	/* bootstrap override for navbar */	.nav > li > a {	padding: 10px;	}	#megamenu {	width: 60%;	padding: 0;	}	.login--content {	margin: 0 auto;	}	.login--content h3 {	padding-left: 1em;	}	.jumbotron {	background: url("https://i.imgur.com/EiiZwcx.jpg");	z-index: 0;	height: 500px;	margin: 0 auto;	padding-bottom: 0;	background-size: cover;	background-position: 50%;	background-repeat: no-repeat;	}	.jumbotron > .container {	padding: 0;	margin: 4em auto;	}	.generic--tabs .tab--content .input--bar {	border: 1px solid #005396;	}	.middle {	z-index: 2;	width: 100%;	margin: -2em auto;	background: transparent;	position: absolute;	}	.middle,	.middle--left,	.middle--right {	height: 2.08em;	}	.middle--left {	background: #005396;	border-top: 1px solid #fff;	border-left: 1px solid #fff;	border-bottom: 1px solid #005396;	border-radius: 10px 0 0 0;	-moz-border-radius: 10px 0 0 0;	-webkit-border-radius: 10px 0 0 0;	}	.middle--right {	background: #4481b2;	border-top: 1px solid #fff;	border-right: 1px solid #fff;	border-bottom: 1px solid #4481b2;	border-radius: 0 10px 0 0;	-moz-border-radius: 0 10px 0 0;	-webkit-border-radius: 0 10px 0 0;	}	.news,	.news--left,	.news--right {	height: 22em;	}	.graphics--right .content-list {	height: 89.58px;	line-height: 89.58px;	}	.graphics--right img {	width: 75%;	}
}
/* bootstrap overrides */
/* 12.c desktop -----------------------------*/
@media only screen and (min-width: 960px) {	.nav--bottom-links {	float: none;	vertical-align: top;	display: inline-block;	}	.navbar .navbar-collapse {	text-align: center;	}	.jumbotron {	background: url("https://i.imgur.com/EiiZwcx.jpg");	z-index: 0;	height: 60%;	margin: 0 auto;	padding-bottom: 0;	background-size: cover;	background-position: 50%;	background-repeat: no-repeat;	}	.login--content h3 {	text-align: left;	}	.jumbotron > .container {	padding: 0;	margin: 4em auto;	}	.middle {	z-index: 2;	width: 100%;	margin: -2em auto;	position: absolute;	background: transparent;	}	.middle,	.middle--left,	.middle--right {	height: 2.08em;	}	.middle--left {	background: #005396;	border-top: 1px solid #fff;	border-left: 1px solid #fff;	border-bottom: 1px solid #005396;	border-radius: 10px 0 0 0;	-moz-border-radius: 10px 0 0 0;	-webkit-border-radius: 10px 0 0 0;	}	.middle--right {	background: #4481b2;	border-top: 1px solid #fff;	border-right: 1px solid #fff;	border-bottom: 1px solid #4481b2;	border-radius: 0 10px 0 0;	-moz-border-radius: 0 10px 0 0;	-webkit-border-radius: 0 10px 0 0;	}	.generic--tabs .tab--content .input--bar {	border: 1px solid #005396;	}	.news,	.news--left,	.news--right {	height: 22em;	}

Hover tabs with column wrapper - Script Codes JS Codes

$(document).ready(function() {	//switch tabs w/ assigned content	$('.generic--tabs > div').hide();	$('.generic--tabs > div:nth-of-type(2)').show();	$('.generic--tabs ul.tabs li:nth-of-type(2)').addClass('active');	$('.generic--tabs ul.tabs li a').click(function() {	$('.generic--tabs ul.tabs li').removeClass('active');	$(this).parent().addClass('active');	var currentTab = $(this).attr('href');	$('.generic--tabs > div').hide();	$(currentTab).show();	return false;	});	function checkWidth() {	var windowSize = $(window).width();	if (windowSize >= 768) {	$('.generic--tabs > div').hide();	//show the first content div	$('.generic--tabs > div:nth-of-type(2)').show();	//Add active class to the first tab link	$('.generic--tabs ul.tabs li:nth-of-type(2)').addClass('active');	//when a tab is clicked	} else if (windowSize <= 768) {	$('.generic--tabs ul.tabs li:nth-of-type(1)').removeClass('active');	}	}	// Execute on load	checkWidth();	// Bind event listener	$(window).resize(checkWidth);
});
Hover tabs with column wrapper - Script Codes
Hover tabs with column wrapper - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 12, 2022
Rating 3
Size 7,014 Kb
Views 36,432
Do you need developer help for Hover tabs with column wrapper?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (gnarfugh) Script Codes
Name
Timeline on scroll
Mess svg logo
Sticky nav
Small fizzbuzz
Image slider
Flex dropdown nav
React Scoreboard
Columns flex medicare
Google Maps api
Recommended class
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!