If you visited almost any site in 2009, then you probably noticed some form of tabbed browsing being used. It was even part of our 8 Popular Website Design Trends From 2009; however, unlike most of those trends, the tabs are definitely here to stay because there is so much value behind them.
Why Use Tabbed Browsing
While there are unlimited uses for why a website will turn to tabbed browsing, the most common method is to shorten up the sidebar. Nowadays, keeping long stretched out sidebars can cause readers to get lost and conversions to go down. With tabbed browsing, users can see all the information they need in one place.
Below are the simple steps to adding tabs to your website.
For clarity, the instructions will be geared towards Wordpress users; however, they can easily be used on other builds.
1. Get Files Ready
First off, we will need 4 files.
- sidebar.php
- header.php
- style.css
- tabs.js(you’ll have to create this file).
Then, you need to download the latest release of jQuery. This file will be named “jquery.js.” (you may have to rename it). Add it to your theme directory along with each of these other files.
2. Calling jQuery To Your Site
Just like we call stylesheets, we must do the same for jQuery. Add the code below anywhere between the <head></head> tags. This is normally in header.php.
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabs.js'; ?>"></script>
These strings of code basically calls jQuery to be used on every page, so you can add the tabs literally anywhere you want. You can now close the header.php file as we are done with it.
3. Insert Tabs
Obviously you can add the tabs anywhere, but most will choose to include it in the sidebar. If this is the method you choose, then open sidebar.php and paste the following lines of code.
<div class=”tabbed”>
<!– The tabs –>
<ul class=”tabs”>
<li class=”t1″><a class=”t1 tab” title=”<?php _e(‘Tab 1′); ?>”><?php _e(‘Tab 1′); ?>
</a></li>
<li class=”t2″><a class=”t2 tab” title=”<?php _e(‘Tab 2′); ?>”><?php _e(‘Tab 2′); ?>
</a></li>
<li class=”t3″><a class=”t3 tab” title=”<?php _e(‘Tab 3′); ?>”><?php _e(‘Tab 3′); ?>
</a></li>
<li class=”t4″><a class=”t4 tab” title=”<?php _e(‘Tab 4′); ?>”><?php _e(‘Tab 4′); ?>
</a></li>
</ul>
<!– tab 1 –>
<div class=”t1″>
<!– Put what you want in here. For the sake of this tutorial, we’ll make a list. –>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<!– tab 2 –>
<div class=”t2″>
<!– Or, we could put a paragraph –>
<p>This is a paragraph about the jQuery tabs tutorial.</p>
</div>
<!– tab 3 –>
<div class=”t3″>
<!– Or, we could add a div –>
<div>Something needs to go in here!</div>
</div>
<!– tab 4 –>
<div class=”t4″>
<!– Why not put a few images in here? –>
<p>
<img src=”image.gif” alt=”Sample” />
<img src=”image.gif” alt=”Sample” />
<img src=”image.gif” alt=”Sample” />
</p>
</div>
</div><!– tabbed –>
All classes in the code above should be kept the same, otherwise you will need to edit your tabs.js file; however, you can easily edit the classes in your stylesheet. You can close sidebar.php.
4. Setup The Action Of Tabs
Open, or create, the file “tabs.js” for this part of the tutorial. This is the heart of our script. Copy and paste this code into your file.
$(document).ready(function() {
// setting the tabs in the sidebar hide and show, setting the current tab
$(‘div.tabbed div’).hide();
$(‘div.t1′).show();
$(‘div.tabbed ul.tabs li.t1 a’).addClass(‘tab-current’);
// SIDEBAR TABS
$(‘div.tabbed ul li a’).click(function(){
var thisClass = this.className.slice(0,2);
$(‘div.tabbed div’).hide();
$(‘div.’ + thisClass).show();
$(‘div.tabbed ul.tabs li a’).removeClass(‘tab-current’);
$(this).addClass(‘tab-current’);
});
});
You can now close that file.
5. Style Your Tabs
Lastly, we need to style our tabs. Make it look pretty and actually blend into our site. Open up your stylesheet (i.e. style.css) and paste the code below. Obviously, edit it to get the look you want.
/* Contains the entire tabbed section */
.tabbed {
}
/* List of tabs */.tabbed ul.tabs {
float: left;
display: inline;
width: 100%;
margin: 0;
padding: 0;
}
.tabbed ul.tabs li {
list-style: none;
float: left;
margin: 0;
padding: 0;
}
.tabbed ul.tabs li a {
overflow: hidden;
display: block;
margin: 0 2px 0 0;
padding: 10px 12px;
}
.tabbed ul.tabs li a:hover {
}
/* The current selected tab */
.tabbed ul.tabs li a.tab-current {
}
/* The content shown when a tab is selected */
.tabbed div {
float: left;
display: block;
width: 100%;
}
/* Set the CSS to make sure the other tabs’ content isn’t shown other than the first */
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
display: none;
}
/* Content for inside your tabs’ divs */
.tabbed div ul {
}
.tabbed div p {
}
.tabbed div div {
}
So there you have it. A very simple and easy way to add tabs to your website.