First off, Merry Christmas! For those of you who feel that I’m scrouge for not giving you anything for Christmas, well I’m about to prove you wrong. I spent a few hours on Christmas eve building a little tabbed menu script. I built it with the jQuery framework and I call it ‘jTabber’. It allows you to scroll through content by clicking on tabs, without the page having to reload. The content is already on the page, you just need some javascript to tell it to display. It’s very flexible in what you’re wanting to do with it.

Last updated: Feb 24, 2008

NOTE: I strongly recommend using a more up-to-date tab plugin like the one maintained by the jQuery UI team. You can find it at http://jqueryui.com/demos/tabs/

Download It! (v1.5)

Demo It!

The script requires the latest version of jQuery (included 1.2).

Usage

Attach the following lines in the head of your document.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jtabber.js"></script>
<script type="text/javascript">
 
		$(document).ready(function(){
 
		$.jtabber({
			mainLinkTag: "#nav a", // much like a css selector, you must have a 'title' attribute that links to the div id name
			activeLinkClass: "selected", // class that is applied to the tab once it's clicked
			hiddenContentClass: "hiddencontent", // the class of the content you are hiding until the tab is clicked
			showDefaultTab: 1, // 1 will open the first tab, 2 will open the second etc.  null will open nothing by default
			showErrors: true, // true/false - if you want errors to be alerted to you
			effect: 'slide', // null, 'slide' or 'fade' - do you want your content to fade in or slide in?
			effectSpeed: 'fast' // 'slow', 'medium' or 'fast' - the speed of the effect
		})
 
		})
 
	</script>

Also, include the CSS in the head that is with the example.

Parameters

mainLinkTag: (id or class followed by an anchoring tag) The name of your nav div holding the anchors. In this case we’re using #nav a. This is targetting all the <a> tags inside the div with the id nav (#nav). If you change this you must make sure you have a ‘title’ attribute on your anchor that points to the div that you want to open. You can use ‘ul li’ instead of ‘#nav a’ if you want, you just have to make sure you have a title attribute on your li tag, like this <li title="divname"> Im opening the content with the id of ‘divname’</li>

activeLinkClass: (class name) The class you want to assign the anchor when it’s clicked. The default class is ’selected’.

hiddenContentClass: (class name) Where the content is (the title attribute div on the anchor). Once the link is clicked, it will show the contents of that div, this should be a class with the style attribute of display:none. This div should also contain the id corresponding to the ‘title’ attribute on your anchor tags so it
knows which content to display.

showDefaultTab: (integer) If you want the first tab to be opened once the page is loaded, leave this at 1. If you want the 2nd tab to be open then change it to 2. If you don’t want any tabs to be open then change it to say null.

showErrors: (true/false) If an error occurs, you’ll probably want to know what it is.

effect: (null, ’slide’ or ‘fade’) You can have the content appear with an effect, slide in or fade in. If you don’t want an effect and you just want it to be displayed, make this null.

effectSpeed: (’slow’,'medium’ or ‘fast’) This is the speed you want the effect to run at.

Your HTML should look similar to the code below

<div id="nav">
	<a href="#" title="divname">Merry Christmas</a>
	<a href="#" title="divname2">Joyeux Noel</a>
	<a href="#" title="divname3">Feliz Navidad</a>
	<div class="clear"></div>
</div>
 
<div id="divname" class="hiddencontent"> this is content from the div with the id "divname", we are linking to this by giving the anchor a title attribute with the value of "divname". </div>
<div id="divname2" class="hiddencontent"> this is more content from the div with the id "divname2" </div>
<div id="divname3" class="hiddencontent"> this is more content from the div with the id "divname3" </div>