JQuery Plugin: imUpsideDownTabber

While designing this blog, I decided that I wanted to use tabs to display certain pages. I needed a JQuery Plugin that worked similarly to jTabber except that I wanted the tabs to display underneath the content. In addition, I wanted the relevant content to slide down (animated) when the tab was clicked. I read somewhere that I could use jTabber to accomplish this, but I thought that it would be easier if I just created the plugin myself. So I created the JQuery Plugin, imUpsideDownTabber (I couldn’t think of a better name). Click on the menu items at the top of this page (about, links, recent) to see the plugin in action.

Download
First, download the plugin (the plugin can be downloaded from Google Code or JQuery Plugins).

Setup
CSS: First we have to create the following styles for the plugin.

1. The “Slider” container. This ID Selector is the container for all the elements used within the plugin.
2. The Content class. Each content div (about, links, recent, etc) will given this class name.
3. The Tab container. As the name suggests, this ID Selector will contain all the tabs.
4. The tabs. Style the “a” element.
5. The Active Tab Class. The selected tab class. How the tab will display when selected

The following is the styling I used for the plugin used on this blog:

.tab_content {
	width:948px;
	display:none;
	float:left;
	margin-left:11px;
	padding-left:10px;
	font-size:11px;
	color:#2d2d2d;
	border-bottom: solid 2px #000;
}
 
#tab_cntnr {
	width:968px;
	float:left;
	background: url(images/body_back.jpg) repeat-y;
}
 
#tab_cntnr a {
	display:block;
	text-decoration:none;
	float:right;
	width:75px;
	height:26px;
	color:#fff;
	background: url(images/menu_tab.jpg) no-repeat;
	text-align:center;
	font: bold 10px Helvetica, Arial, sans-serif;
	margin-right:5px;
	padding-top:3px;
}
 
#tab_cntnr a.selected {
	color:#2d2d2d;
	background: url(images/menu_tab_over.jpg) no-repeat;
}

HTML:
Next we have to create the markup. The following example is taken from this blog:
*Note: The tabs are dynamically generated and so are not created in the markup.

<div id="slider">
<div id="about" class="tab_content">
	  have_posts()) : $about-&gt;the_post();
the_content('
 
Read the rest of this page »
 
');
	  endwhile;
	  ?&gt;</div>
<div id="Links" class="tab_content">
<ul></ul>
</div>
<div id="Recent" class="tab_content"></div>
</div>

Notice that each content div (class=”tab_content”) is also given an ID. This id is needed for the plugin.

The Head Section:

Add JQuery and the imUpSideDownTabber to the head section

<script src="path to jquery/jquery-1.2.6.min.js" type="text/javascript"><!--mce:0--></script>
<script src="path to plugin/jquery.imUpSideDownTabber-0.5.js" type="text/javascript"><!--mce:1--></script>

Now add:

<script type="text/javascript"><!--mce:2--></script>

The “tabs” option is a Javascript object that will link each tab to the relevant content. The “Caption” is the text that will be displayed on the tab. The “content_id” is the ID of the relevant content div. Also, the tabs should be listed in reverse order of appearance (i.e., the “About” tab is listed last because it is the first one that I want displayed on the page).