jump to navigation

Simple jQuery Content Swapper October 10, 2011

Posted by Tournas Dimitrios in JQuery.
trackback

Just need a simple way to swap content out using JQuery real quick ? This seems to come up a lot in my life .  This has been done many times already in different and superior ways , but , I like this simple implementation , and thought I’d share it for others to use and build upon ( It is compatible with JQuery 1.3++ ) . See a live demo and explore the source code , Enjoy…

Concept here is hide every content block except the active one . When a nav item is clicked, show the correct content :

<script charset="utf-8" type="text/javascript">// <![CDATA[

// ]]></script>
//simple contentSwitcher
$(function(){

function contentSwitcher(settings){
		var settings = {
contentClass : '.content',
navigationId : '#navigation'
		};

//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');

//onClick set the active state, hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);

//dissable normal link behaviour
	e.preventDefault();

//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');

	//hide the old content and show the new
	$(settings.contentClass).hide();
	contentToShow.show();
	});
}
contentSwitcher();
		});
	</script>

Source of code .

Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s