the graphic design blog that speaks the truth

This tutorial will describe the extremely simple process of setting up a jQuery content switcher. There are many jQuery carousel scripts out there that enable you as a developer to create wonderful animations between elements to add some extra flair to your site, but what if you simply wanted to switch the content that was in a particular container without the need for a plugin? I will show you how this can be achieved with just a few lines of jQuery code, and some simple CSS styling.

The Structure

First off, we need to create a HTML layout similar to the following:

<div class="tab">
View Content 1 Container
</div>
<!-- tab item used for navigating through different content -->

<div class="content">
First Container Content
</div>
<!-- content that will be switched -->

<div class="tab">
View Content 2 Container
</div>
<!-- tab item used for navigating through different content -->

<div class="content">
Second Container Content
</div>
<!-- content that will be switched -->

<div id="screen">
</div>
<!-- The div that will contain the interchanging content -->

As you can see, we simply have two divs declared with the class “tag” to be used as the navigation and two divs declared with the class “content” containing some content that will be switched between. We have also created a div named “screen” that will contain the changeable content.

Now that we have our structure in place we need to hide the “content ” divs, so that we can use jQuery to only enable one “content” div to be viewed at once. Adding the following CSS

.content {

display:none;

}

does this for us.

NOTE: you will probably want to add some styling to the “screen” div to meet your own requirements.

Adding the jQuery

Now that we have our structure sorted, we can go about adding in our tiny jQuery snippet to bring the content switcher to life:

<script>
$(document).ready(function(){
var $content1 = $('.content').first().clone();
$content1.css("display", "block");
$('div#screen').html($content1);

$(".tab").live("click", function() {

var $content = $(this).next('div.content').clone();
$content.css("display", "block");
$('div#screen').html($content);
}
);
});
</script>

As you can see above, we firstly set our code to immediately clone the content of the first div named “content”, and place it into our “screen” div. This is necessary to ensure that our page has some content when first loaded. The next part of the code sets out that when a “tab” is clicked, it should clone the contents of the “content” div that immediately follows it, and place that content into the “screen” div. There we have it, a super simple jQuery content switcher!

There are a couple of things to discuss before I feel comfortable to finish off the tutorial though:

1. The structure section is a lot more important than you might think – The jQuery code will open the “content” div in the code that immediately follows the tab clicked, so it is important you structure your code in the same way as outlined above. I.e tab, content, tab, content, tab, content etc. If you were to structure your code, tab, tab, tab, content, content, content, all three tabs would only open the first content and as such, your switcher will be ineffective.
2. This code uses jQuery’s .clone() method, alongside with it’s .html() method to copy the entire contents (divs, images etc)  into another div. It will not however, be able to perform ajax updates within itself.

Both of the two issues above can be solved, but for such a simple task, our above code is a super lightweight solution to what can sometimes be an over-complicated problem. For a slightly more advanced version that does enable ajax updates and has a more flexible structure, be sure to check back here soon.