Progressive Enhancement: Anchor Links to Side Tabs

Here is an example of progressive enhancement technique using jQuery to turn anchor links into side tabs.

Anchor Links Example

Assumption here is that the links are inside an unordered list with ID "services" services assigned to it.

    
Donec arcu est

    
Sed at sem lacus

    
Proin non turpis urna

    
Vestibulum non ipsum orci

    
Nullam cursus ullamcorper

    
Lorem ipsum dolor sit amet

Named anchord are inside a div element with class "item" assigned to it.

 ....text.... 
 ....text.... 
 ....text.... 
 ....text.... 
 ....text.... 
 ....text.... 

jQuery code

Here is a summary of what jQuery will do to the DOM:

1. Append styles
2. Add wrapper div and place all items inside it
3. Highlight and show the first item
4. Add click event to handle navigation from item to item

See comments below for more details.

$(document).ready(function(){
	//page settings
	var navcontainer = "#services";		//Add to the UL conaining the links
	var itemcontainer = ".item";		//Add to the DIV around each section
	var itemwrap = "item_wrap";			//A DIV element with this ID will be wrapped around all items
	var selecteditem = "selecteditem"; //class assigned to the currently selected link
	
	/*****STYLES BLOCK*****/
	// Styles can also be defined in a separate CSS file. if you do so comment out or delete styles block 
	var styles = '<style>'+
	'#'+itemwrap+' {background: #e8e8e8; padding: 10px 15px 15px 15px; float: left; width: 400px; }'+
	navcontainer+' {float:left;font-size:12px;margin:10px 0 0;padding:0;width:250px;list-style: none;}'+
	navcontainer+' li{border-bottom:1px solid #E8E8E8;}'+
	navcontainer+' li a{display:block; color:#3333CC; text-decoration:none;line-height:12px;padding:8px 0px 8px 10px;outline:0;}'+
	navcontainer+' .'+selecteditem+'{background: #e8e8e8;}'+
	'</style>';
	//add styles to the head
	$("head").append(styles);
	/*****END STYLES BLOCK*****/
	
	//create item_wrap div
	$(itemcontainer+":first").before('<div id="'+itemwrap+'"> </div>'); 
	//add items to wrap
	$(itemcontainer).appendTo("#"+itemwrap);
	//show only first item
	$(itemcontainer).not(":first").hide();
	//mark first link as selected
	$(navcontainer+" li:first").addClass(selecteditem);
	//services click
	$(navcontainer+" a").click(function(){
		$(navcontainer+" li").removeClass(selecteditem);
		$(this).parent("li").addClass(selecteditem);
		var li_index = $(navcontainer+" a").index(this);
		$(itemcontainer).hide().eq(li_index).slideToggle("fast");
		return false;		
	});
});

Here is an example.

Do you like this or find it useful? Drop me a note or treat me to a double-espresso from my favorite coffee shop.