How to change content in jQuery without loading a new page?

[ACTIONpack]

Image below is what I want it to do. I want to click on the tab on the left and instead of loading the page to a new page. I would like it to change in that one DIV. I know you can do that in jQuery but don't know where to look for it because I don't know the right word they use to do this.

[Kool Box]

The simplest way to achieve that is to have a DIV content frame that you want the information to be displayed in eg

<div id="databox">[/CODE]

Within this box you are going to tell JQuery to load a specified page into that DIV container. On your menu links you need some on javascript to load a function on click to populate the container.

Adding the code below to your head section:

[CODE]<script>
/* universal page loader*/
function loadThePage(pageName) {
$("#databox").load(pageName);
}
</script>[/CODE]

and add this code to your anchor links of your menu links

[CODE]<a href="#" onClick="loadThePage('nameOfDesiredPage.html')">Menu Item Name</a>[/CODE]

There are other solutions but I'm just giving the simplest implementation straight of the top of my head.

[Seahorsepip Veteran]

You can try loading content trough ajax or just hide the content and change the display property trough jquery :p