Create a Responsive Tab Box Using jQuery and CSS
Today I am going to show you how to create a tab box using jQuery and CSS. This is certainly a common component found in many websites today. What I like about what we are going to build today is that it gives you a very vanilla boilerplate upon which you can expand. You can add all the styling, colors, and sizing you want on top of this but this will give you a nice starting point. We are also going to be using percentage based width for the components so that you can drop it into any responsive project you are working on.
So let’s get started…
We’ll lay out the HTML first and then move on to the CSS and JavaScript and then look at making things responsive…
HTML
We’re going to start with some basic markup for our HTML. Create a new HTML file and with the following markup and include a CSS file in a CSS directory…
<!DOCTYPE html> <html> <head> <title>Tab Box Using jQuery and CSS</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Tab Box Using jQuery and CSS</h1> </body> </html>
You’re also going to want to include jQuery. I like using jQuery hosted on Google Libraries. Google Hosted Libraries has the latest versions and all other versions of jQuery hosted there for you to use. All you have to do is include the link in your markup. Place the following line of code after the stylesheet tag.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
So your code should now look like the following…
<!DOCTYPE html> <html> <head> <title>Tab Box Using jQuery and CSS</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <h1>Tab Box Using jQuery and CSS</h1> </body> </html>
Now we are going to add the markup for our tab boxes. Add the following to the body section of your markup…
<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Categories</a></li>
<li><a href="#tab2">Archives</a></li>
<li><a href="#tab3">Tags</a></li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
This would be the categories...
</div>
<div id="tab2" class="tabContent">
This would be the archives...
</div>
<div id="tab3" class="tabContent">
This would be the tags...
</div>
</div>
</div>
Which makes our HTML file now look like what is shown below…
<!DOCTYPE html>
<html>
<head>
<title>Tab Box Using jQuery and CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>Tab Box Using jQuery and CSS</h1>
<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Categories</a></li>
<li><a href="#tab2">Archives</a></li>
<li><a href="#tab3">Tags</a></li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
This would be the categories...
</div>
<div id="tab2" class="tabContent">
This would be the archives...
</div>
<div id="tab3" class="tabContent">
This would be the tags...
</div>
</div>
</div>
</body>
</html>
That about does it for the markup. Now let’s add some styling…
CSS
Open your style.css file and add the following CSS to it…
div.tabBox {
width:99.9%;
float:left;
overflow: visible;
}
div.tabBox h3 {
padding:20px 0px;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
width:99.9%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 32px;
line-height: 32px;
margin-bottom: -1px;
overflow: hidden;
position: relative;
}
ul.tabs li a {
display: block;
padding: 0 5px;
outline: none;
background:none;
}
.tabContainer {
border-top: none;
overflow: hidden;
clear: both;
float: left;
width:99.9%;
min-height:300px;
margin-bottom:10px;
}
.tabContent {
padding: 20px;
}
.tabContent h3 {
padding:0px;
}
/**** TABS STYLES ****/
div.tabBox h3 {
}
ul.tabs {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
}
ul.tabs li {
}
ul.tabs li a {
background:#eee;
text-decoration: none;
font-size: 11px;
color: #000;
outline: none;
border: 1px solid #ccc;
border-left: none;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
}
ul.tabs li a:hover {
background: #eee;
}
ul.tabs li.active {
border-bottom:1px solid #fff;
}
ul.tabs li.active a, ul.tabs li.active a:hover {
background: #fff;
}
div.tabContainer {
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background:#fff;
}
Seems straightforward enough eh? Notice how I separated the tabs’ styling out. This is optional and you could of course, integrate those styles back in with the other selectors. I often like to separate CSS if it’s a small enough block out like because it gives you the ability to easily separate structure and positioning from look and feel. It makes for easier creation of themes.
To make the tabs responsive in adapting to a changing viewport size, add the following CSS to the end of our CSS file…
@media only screen and (max-width: 767px) {
div.tabBox {
border: 1px solid #ccc;
}
ul.tabs {
height: auto;
display: block;
width:100%;
border-left:0px;
}
ul.tabs li {
width:100%;
}
ul.tabs li a {
border-top-left-radius:0px;
-moz-border-top-left-radius:0px;
-webkit-border-top-left-radius:0px;
border-top-right-radius:0px;
-moz-border-top-right-radius:0px;
-webkit-border-top-right-radius:0px;
border:0px;
}
div.tabContainer {
border: 0px;
}
}
This is just a demonstration of what you could do as the size of the screen gets smaller. There are other possible options as well. If you wanted to change the point at which the tabs change you could change the (767px) value to something else.
jQuery
From here, there’s actually not a lot in the way of JavaScrpt that you need to achieve the effect you want out of our tabs. Just the small block of code before the closing </body> HTML tag in your markup and that should do the trick…
<script type="text/javascript">
$(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
</script>
So the entire completed markup should look like the following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab Box Using jQuery and CSS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>Tab Box Using jQuery and CSS</h1>
<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Categories</a></li>
<li><a href="#tab2">Archives</a></li>
<li><a href="#tab3">Tags</a></li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
This would be the categories...
</div>
<div id="tab2" class="tabContent">
This would be the archives...
</div>
<div id="tab3" class="tabContent">
This would be the tags...
</div>
</div>
</div>
<script type="text/javascript">
$(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
</script>
</body>
</html>
And that’s how it’s done! Happy tabbing!
Update
It was asked in the comments how one would automatically cycle through the various tabs. To accomplish this you would just need to add the following code abode the $(“.tabContent”).hide(); function in the jQuery…
var currentTab = 1;
window.setInterval(function(){
if($('ul.tabs li:last-child').hasClass('active'))
currentTab=1;
else
currentTab++;
$('ul.tabs li:nth-child('+currentTab+') > a').trigger('click');
}, 3000);
where the 3000 means 3000 milliseconds (or 3 seconds). To change it to a shorter or longer interval, you’d just have to change this value.
CSS, jQuery, responsive web design, web development
Thanks for the post! I was wondering if there was a way to make this toggle through each of the tabs automatically with a fade effect?
That’s a good suggestion Toni. I have posted an update in the article! Thanks for reading.
Dude, you’re awesome man. Thanks so much for this!
No problem. 🙂
These tabs are not ‘responsive’ — meaning, they do not respond to media queries when the browser is resized, and certain has no place under a tag of ‘responsive web development’. I suggest you rename it to ‘jQuery Tabs’ or something equally ubiquitous, to avoid confusion in google searches. Cheers.
Yeah that’s a good point. As a result I have updated the article and the demo. It’s just an example. There might be other (better) ways to handle tabs on smaller viewing areas. Thanks for the feedback.
The css should be mobile first… not the way around.
Perhaps you are right. When I first created this (long before I even posted it one the blog), mobile first wasn’t a widespread idea just yet. So that’s kinda why it is the way it is.
How do I have 2 instances of a tabbed box on the same page without them interfering with each other?
How would you go about linking to these tabs individually using hash links?
ie) https://example.com/tabpage.html#tab2
When you refresh a page it jumps back to the first tab…
I suspect the coding is in the jQuery side but not sure where to start. Thanks in advance!
Hi there Kyle…
You could do a check at the beginning doing something like the following instead of just loading up the first tab by default…
$(".tabContent").hide(); if(window.location.hash != '') { $('a[href="'+window.location.hash+'"]').parent().addClass("active"); $(window.location.hash).fadeIn(); } else{ $("ul.tabs li:first").addClass("active").show(); $(".tabContent:first").show(); }These are great. I have 2 rows of them and am looking for a way to center them? Any help would be appreciated.
Hey there Paul– You would probably want the container that holds them to have a width or max-width property set and also having margin-left and margin-right properties set to “auto.”