Super simple jQuery content swapper

October 26, 2009

See Example Page

Just need a simple way to swap content out using javascript real quick? This seems to come up a lot in my life. On a recent job interview I was given a task to do this and the following is what I came up with. I’m positive 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. Enjoy…

The HTML

For the markup, you just need a list for your navigation, and blocks of content for your content. Each content block needs a unique id to link to from your nav and the class of ‘content’:

<div id="navigation">
	<ul>
		<li><a href="#page1">Page 1</a></li>
		<li><a href="#page2">Page 2</a></li>
		<li><a href="#page3">Page 3</a></li>
		<li><a href="#page4">Page 4</a></li>									
	</ul>
</div>
 
<div id="page1" class="content">
	<h2>Page 1 content</h2>
	<!-- page 1 content -->
</div>
 
<div id="page2" class="content">
	<h2>Page 2 content</h2>
	<!-- Page 2 content -->
</div>
 
<div id="page3" class="content">
	<h2>Page 3</h2>
	<!-- Page 3 content -->
</div>
 
<div id="page4" class="content">
	<h2>Page 4</h2>
	<!-- page 4 content -->
</div>

The jQuery javascript

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

$(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();
});

I know this is missing many features (bookmarkableness for one), but a simple starting point. Enjoy…

Comments (5)

  1. KhaiFebruary 4, 2010

    William, interesting jquery code, thank you..

  2. ninFebruary 25, 2010

    The code worked on Firefox but not on IE6. Although people are using IE7 now, there are still lots of people out there on IE6. Any ideas on how to make this cross-browser compatible?

  3. WillyPFebruary 25, 2010

    Actually it does work on ie6, the css was a bit lame for it, but i did that example page in literally 3 mins! But the functionality of the javascript worked fine for me in IE6 . What did not work for you? I know you have to click the words to make it switch, but that would be easy to fix if you need to. Let me know if you need css help with that.

  4. SteveNovember 21, 2011

    replace
    contentToShow.show();
    with
    $(contentToShow).fadeTo(”slow”, 1);

    for a nicer effect

  5. peteJuly 30, 2012

    Steve, that results in code errors. At first glance I didn’t think it work, but figured you weren’t being literal. Maybe just giving a hint? I’m a novice at javascript and jquery, so could you please show how it would fade… in context? Thanks!

Add a Comment