A quick way to display separate pieces of information on a page without the need for multiple pages is to use jQuery. I’ll run through the process now.

1 – include jquery.js

You will need to download jQuery in order to use it. They do allow you to link to the latest version of the javascript framework but I only recomend to use it while testing since things change from version to version.

2 – setup your “content divs”

I’m going to use div’s as a way of dividing up my content into sections. You can use other methods but this will work fine for this example.

<div id="cat_a">
<h3>category A</h3>
</div>
 
<div id="cat_b">
<h3>category B</h3>
</div>
 
<div id="cat_c">
<h3>category C</h3>
</div>

Pretty straight forward. Only thing to note here is that we have applied an id to each of the divs, you can use a class instead but make sure you use a unique class for each div.

3 – Setup the buttons

Now I’m going to layout the buttons that will control the sorting of the 3 categories.

<a href="" id="a_button">Category A</a>
<a href="" id="b_button">Category B</a>
<a href="" id="c_button">Category C</a>

Again, note that each link has its own id.

4 – Building the jQuery

All we have to do from here is build the jQuery code to control the categories. Create a document ready function that will be called once the page is fully loaded.

 
<script type="text/javascript">
$(document).ready(function() {
$('#cat_a').toggle();
$('#cat_b').toggle();
 
$('#a_button').click(function () {
	$('#cat_a').toggle("fast");
	$('#cat_b').hide();
	$('#cat_c').hide();
});
 
$('#b_button').click(function () {
	$('#cat_a').hide();
	$('#cat_b').toggle("fast");
	$('#cat_c').hide();
});
 
$('#c_button').click(function () {
 
	$('#cat_a').hide();
	$('#cat_b').hide();
	$('#cat_c').toggle("fast",false);
});
});
</script>

Ok, there is a lot of code here. What this does is this: the first line is the main function that everything else is contained in, this executes when the page is loaded.

Then we hide our other categories that we do not want to display by default.

Next, we add click events with functions for each button. In each click event function we toggle ( show ) the appropriate div and hide the others. This is repeated for all of the buttons.

Thats it! nothing more, with this you will have animated toggling of each div. This is a very basic start into jQuery. I suggest reading up on the jQuery documentation available on their site.