The simplest solution belongs to BarelyFitz Designs.
1) BarelyFitz tabifier
Here’s how they present it:
- 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.
Here are the steps you need to take to use it:
1. Add the following styles to your template, before </b:skin>:
2a. Download the tabber.js file from mdn.fm, host it, then replace below with your URL and place this line before </head>:
2b. Alternatively, instead of the line above copy the whole script into your template:
3. Finally, enter the following code so that the tabber is visible, below <div id=’sidebar-wrapper’>
<div class='tabber' id='tab1'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
2) Bloganol 5-in-one
Make sure you change <b>Tabn</b> to an appropriate title for each tab and Tab n Content with the content you want to see in each tab, where n takes values from 1 to 5.
3) From Russia with PHP Lyubinskiy
This is quite similar to our first example.
1. Paste the following styles before </b:skin>:
2a. Download the Tabview script from the link below (tabview-dl), host it, then add the following line above </head>:
2b. Alternatively, as in our first example, you might want to paste the script into your template:
3. To use it, paste the following into a widget and change as you wish:
If these simple solutions do not satisfy you, consider one based on jquery, as presented in our second episode.