You must have seen the tabbed interface on several professional blogs. The same is also present on this blog in the sidebar to the right.
In fact, I’ve had this running on this blog as well as my personal blog for a long time now, where I displayed post details.
Would you like to run this on your blog? Well, here’s how you can do that.
- Converts your HTML into a dynamic tabbed interface.
- Does not require you to set up a list of links, or anchors for the tabs.
- Use CSS to customize the appearance of the tabs.
- Gracefully supports printing (try a print preview on the example.html page) and allows a different set of styles to be applied when printing.
- Multiple tab sets on a page – you can even nest one tab set within another.
- Set the initial tab to be displayed.
- Define onLoad and onClick callback functions to perform more advanced functions, such as loading the tab content dynamically using AJAX.
- Use a cookie to remember which tab was selected so it remains selected when you return to the page.
- Object-oriented, extensively-commented code.
- MIT license so you can modify and use in commercial projects.
Implementing Tabber on your website or blog is extremely simple. You just need basic HTML knowledge.
Start off by adding the following code in the between the
</head> section of your page.
The script above includes the tabber.js file. We also disable automatic startup.
Just before the
</body> tag, add the following code. The code will cause tabber to run.
The following HTML code will generate the necessary tabbed interface.
<div class="tabber"> <div class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab" title="MyTabTitle"> Section two content. </div> </div>
You have two ways of creating the titles of the tabs as the code shows above. The first is using the
<h3> tag. The second is to use the
title attribute for the
div. I prefer using the
class="tabbertab" for the div will create a new tab when tabber activates.
The best part about tabber is that you can create as many tabbed interfaces on your blog as you need.
There are several advanced uses of Tabber. However, for creating simple tabbed interfaces, this is all you need 🙂
You can however cover one more step of customizing the look of your tabbed interface by editing the included CSS file (simply rename example.css to tabber.css.
Do you have tabber implemented on your blog? Or do you use any other script for the same?