jQuery Tabs With Ease

Posted by jj_jiles on Jul 3, 2010 in jQuery & Javascript | 0 comments

As usual, I always need something special in jQuery. I’m always able to find plugins out there, but they never everything I want, the way I want it done. Each always falls short somewhere. It either limits my design flexibility, is buggy or is just flat-out bloated with way more code than is necessary.

I’ve written a tabs script for jQuery that is short and to the point while still allowing for design flexibility and ease. There’s nothing to it. Simply establish the tabs settings with your appropriate IDs and classes and you’re good to go. I’ve used on a few occasions and it has yet to fail me.

As usual, however, let me know if you have problems. I’ve supplied complete code for HTML, CSS and, of course, the jQuery/JavaScript.

Let’s Start With The HTML

<div id="tabs">
	<b class="active"><a href="#selected-categories">Currently Selected Categories</a></b>
	<b class="inactive"><a href="#all-categories">All Available Categories</a></b>
</div>

<ul id="selected-categories" class="tab">
        <li id="item1" class="li-item">Item 1 text</li>
        <li id="item2" class="li-item">Item 3 text</li>
        <li id="item3" class="li-item">Item 7 text</li>
        <li id="item3" class="li-item">Item 8 text</li>
</ul>
<ul id="all-categories" class="tab">
        <li id="item1" class="li-item">Item 1 text</li>
        <li id="item2" class="li-item">Item 2 text</li>
        <li id="item3" class="li-item">Item 3 text</li>
        <li id="item3" class="li-item">Item 4 text</li>
        <li id="item1" class="li-item">Item 5 text</li>
        <li id="item2" class="li-item">Item 6 text</li>
        <li id="item3" class="li-item">Item 7 text</li>
        <li id="item3" class="li-item">Item 8 text</li>
</ul>

The CSS

/* *****
* tab header properties
***** */
#tabs { margin: 0 0 -2px 0; height: 45px; }
	#tabs b { display: block; float: left; margin: 0px; background: #fff; font-weight: normal; }
	#tabs b.active { background: #e0d3e3; }
		#tabs b a { display: block; color: #a989b0; padding: 10px; border: 1px solid #d3d3d3; text-decoration: none; }
		#tabs b a:hover { background: #f5edf6; }

		#tabs b.active a { color: #663366; }
		#tabs b.inactive a:hover { background: #f5edf6; }

/* *****
* tab content
***** */
.tab { clear: both; width: 100%; height: 250px; margin: 0; padding: 0; overflow: hidden; overflow-y: scroll; background: #fff; border: 1px solid #d3d3d3; }
	.tab li { font-weight: normal; padding: 10px; border-bottom: 1px dotted #d3d3d3; cursor: pointer; color: #663366; }
	.tab li:hover { background: #e0d3e3; }

The jQuery Code

/* *************************************************
*
* configuration: settings for class & ids of tab
* elements
************************************************* */
var tabs = {
	default_tab    : 0,                    // the # of the tab that should be shown on page load
	// the tab itself
	tab : {
		wrapper   : '#tabs',          // parent that wraps around each tab header
		container : 'b',                // the container that wraps around the clickable tab text
		clickable : 'a',                 // the clickable tab text
		_class     : {
			active   : 'active',   // class for the active tab
			inactive : 'inactive' // class for all inactive tabs
		}
	},
	// the content for each tab
	content : {
		_class  : '.tab'                 // class of the content for the tabs
	},

	/* *************************************************
	*
	* bind tabbing events
	*
	************************************************* */
	init : function() {
		$( tabs.tab.wrapper + ' ' + tabs.tab.clickable ).click(function() {
			var id 	= $(this).attr('href');
			var par 	= $(this).parent();

			// hide all tab content
			$.each( $( tabs.content._class ), function(i) {
				$( this ).css( 'display','none' );
			});

			// display the tab content chosen
			$( id ).css('display','block');

			// show the tab as clicked
			$.each( $( tabs.tab.wrapper + ' ' + tabs.tab.container ), function() {
				$( this ).removeClass( tabs.tab._class.active );
				$( this ).addClass( tabs.tab._class.inactive );
			});

			par.removeClass( tabs.tab._class.inactive );
			par.addClass( tabs.tab._class.active );

			return false;
		});

		// hide all tab content except the first tab
		$.each( $( tabs.content._class ), function(i) {
			if (i > tabs.default_tab) {
				$( this ).css('display','none');
			}
		});
	}

};

Now Initiate the Code

$(document).ready(function() {
        /* ************************************
        * only initiate the tab function if tabs are preset */
	        if ( $('#tabs').length > 0 ) {
		        tabs.init();
	        }
});

There you go. That’s all there is to it. The code is definitely portable and you could make it a plugin yourself if you wanted. I will get it setup to allow multiple sets of tabs per page and update when it’s completed.

Example

• Item 1 text
• Item 3 text
• Item 7 text
• Item 8 text

• Item 2 text
• Item 4 text
• Item 5 text
• Item 6 text