Here is another reader query that I would like to answer to all my readers. Ken Savage asked this question about what script I use to get the tabs in the sidebar?
The actual reason I started using tabs was because since I changed to using a two column theme I wanted to get a lot of information in the sidebar but it could not be done in a normal way as that would lead to a very long page which would leave the main content area empty beyond a point.
My idea was to get a more compact look to the site which fitted in as much information as possible in as little space I could use, that is the reason I started using tabs.
Lets see how exactly you can add tabs to your own web site.
What Is The Script Being Used For Creating Tabs?
I make use of an open source script called JavaScript Tabifier which uses CSS and JavaScript to create tabs to group content together. If you want to add tabs for your site you can download the script from the website. I prefer the light version of tabifier which is around 5Kbs in size and does not cost much on site load time.
Lets have a look at some tips on adding tabs to your website, it is very simple and I will try and simplify it further more so that it becomes easier for users to implement on their sites. Lets look at the steps to add tabs to your site.
First Step: Add the JavaScript and CSS files to the Header File
As the first step edit your template header and include the path to the tabber JavaScript file inside the <head> tags. You will need to add the code as shown below, please change the path of the files to the appropriate directories the files are kept in.
<head>
..... Other header codes ....
<!-- ADD THE TABBER FILES BETWEEN THE HEAD TAGS -->
<link rel="stylesheet" href="http://techie-buzz.com/wp-content/themes/techie-buzz-2/js/tabber.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="http://techie-buzz.com/wp-content/themes/techie-buzz-2/js/tabber-minimized.js"></script>
</head>
Second Step: Add the Main Container to hold the Tabs
Once you have added the JavaScript and CSS files to the header you will now have to edit your template sidebar to tabify your content. Adding tabs to your site is pretty simple and requires very minimal CSS skills along with a minimal skill of tweaking your theme.
To start of with we need to use layers to group our content together, the main layer has to have a class called tabber. This will be the main container which will hold all the tabs.
<!-- This is main container for holding tabbed content -->
<div class="tabber">
</div>
Third Step: Add the Tabs to the Container
Now that we have the main container ready with the above code, lets see how we can add child tabs to the container. To add tabs you will need to create another layer with a class tabbertab. Lets have a look at the code example.
<!-- Start main container -->
<div class="tabber">
<!-- Start the first tab -->
<div class="tabbertab">
<h2>Tab Title Goes Here</h2> <!-- This is the header of the tab -->
<!-- Start Content for the tab -->
This are some content I want in the tab
<ul>
<li>I can also use</li>
<li>Unordered lists</li>
</ul>
<p>Or anything else</p>
<!-- End tab content -->
</div>
<!-- End the first tab -->
</div>
<!-- End main container -->
As we see in the above code now we have added the tab with a class tabbertab, the title of the tab has to be given inside the <h2></h2> tags. You can have any content after the title as part of the tab.
If you want to add more than one tab, you just need to create another layer with the class tabbertab. You can add as many tabs you want to within a container.
What if I don’t want something other than the first tab as default?
If you look at the sidebar on this blog, In the tab Recent Comments and Top Commentators the Top Commentators tab is default even though it is second, it is easy to do this. Here is the sample code I use to do this.
In the above code
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
Tab 1 Content
</div>
<div class="tabbertab tabbertabdefault">
<h2>Tab 2</h2>
Tab 2 Content
</div>
</div>
for the second tab I am using two classes tabbertab tabbertabdefault. Note that there is a space between the two class names. The tabbertabdefault tells the tabify javascript that the second tab is the default tab, so instead of showing the first tab it will show the second one as default when the page loads.
You can use the tabbertabdefault on any of the tabs you have to set it as default tab. Also here is the code I use to group Recent Posts, Popular Posts and Categories as tabs.
Before ending I would like to say that you have to use the exact class names for CSS as given in this tutorial as it is set inside the tabber CSS. You can of course change the color of the tabs by editing the CSS and choosing the appropriate color you want to use.
So what are you waiting for go ahead and tabify your blog or web site and provide more information compactly without making a mess out of your templates. If you need any help in tabifying your blog please contact me and I would be glad to help.
How did you like this tutorial, will it be helpful to you? Do let me know through your valuable comments. If you have any questions feel free to contact me and will try our best to help you out.
Download the JavaScript Tabifier Script
Technorati tags: tabify, javascript tabs, tabbed content, add tabs to content
