<% SaxoHelp.com %>

"TABBER": function(bag) {
				bag = bag || {};
				nav = bag.nav || ".tabNav a";
				if (nav){
					$(nav).live("click", function(e){
					e.preventDefault();
					target = $(this)[0].hash;
					containerNav = $(this).closest("div").attr("id");
					container = containerNav.split("-nav");
					container = "#"+ container[0] +" div";
					$(container).hide().filter(target).show();
					navs = "#"+ containerNav + nav;
           		 	$(navs).each(function(e){$(this).removeClass('active');});
   	      		 	$(this).addClass('active');
				});

				}

Initializing tabs

				//Enable Tabs
					YourConstructor.TABBER();

Markup Requirements

Navigation

Default selector (“.tabNav a”) can be overwritten by passing in {nav: “someSelector”}

div id = “containerID-nav” | we have to have it this way in order to find the tabbed container for the divs to toggle.
a = each href #DIVID-TO-SHOW corresponds with a unique id of a div within the container.
Html:

    Tab1|
    Tab2|
    Tab3

Containers

Once we run the click event for all anchors in the class .tabNav. On Click we then check the ID of the parent div in order to determine the container to search and toggle within because of this we have to follow a naming convention for the container that corresponds with the navigation. On click of Tab

Html:

Tab 1
Tab 2
Tab 3