Want a simple way to show more content in a tight space? I thought it would be nice to show a way of changing a div's content with links that look like tabs. You could just link to a page with different content, but this changes it with javascript so the loading is instant.
The changing of the content is actually very similar to the tutorial on hiding content dynamically. We're hiding one div, and displaying another.
The only other thing I'm adding is making the tabs look like the current one is selected. In this example, for simplicity, I'm going to literally change their order with their z-index.
The rest is just done with styling in CSS, feel free to play around.
Basically, we have three functions: hideTabs() moves all the tabs to the back. showTab() calls hideTabs and then shows the actual content, and raiseTab() makes the link appear at the top correctly. It's split like that to make it easier to refer to the seperate entities. I thought about it a bit, and think this is the simplest way of doing it.
followed by the actual content in divs as simple as this:
<div id="subtext1">
This text is the stuff that's displayed on tab one.
</div>
One more thing I added was instead of hiding all the content by default, it is shown by default, and then instantly changed to hidden by using document.write(). This means that if the client has javascript disabled, they see all the content, instead of none of it.
To use it you just need to change the HTML. If you want more tabs, you'll also have to add them in to the function hideTabs(), and into the document.write() to hide them.