Note: Updated April 19th, 04' for ability to set display order of each content

Description: Displaying content in non linear ways is the domain of DHTML. With this script, you can initially hide any number of content and reveal them one at a time in sequence, like in a presentation. Great for showing off important points, a series of images etc. Decide whether the "reveal" animation should only be applied once per browser session, or every time the page loads. Furthermore, customize the pause time for each individual content if needed. Script works in both IE5+ and NS6+. Browsers that don't support this script will see all the content at once as usual.

New: You can now custom control the display order of each content!

Demo: The four pieces of content below are revealed one at a time in the order they appear within the page's source:

Directions:

Step 1: Insert the below script into the HEAD section of your page:

Two variables within the script allow you to specify the pause between each content before the next one is revealed (ie: 3 seconds) and also, whether the "revealing" effect should be executed only once per user session.

Step 2: With the script installed, all that's left is to identify the contents that will participate in the effect, by adding class="revealcontent" inside its tag. Here's an example:

<img class="revealcontent" src="ddmouse1.gif">
<img class="revealcontent" src="ddmouse2.gif">
<div class="revealcontent">Some text.</div>

As you can see, the tags can varied, such as a DIV or IMG. It's important to note that the order in which each content will be revealed depends on their order within the webpage's source code.

Now, you can control the pause between each content (in seconds) in two ways. A variable within the script of Step 1 lets you specify this pause universally for every content in one sitting. However, you can further fine tune the pause for a specific content by using the "pausesec" attribute. Here's an example:

<img class="revealcontent" src="ddmouse1.gif">
<img class="revealcontent" pausesec="3.5" src="ddmouse2.gif">
<div class="revealcontent">Some text.</div>

The image above will pause for 3.5 seconds before the DIV that follows it is revealed. Note that "pausesec" has no effect when used in either the very first or last content.

By default each content is revealed in sequential form, in the order they appear within the page's source code. Yes, you can change this behavior as well to manually set the order for some or all of your content. Simply use the "displayorder" attribute, along with an integer as its value:

<img class="revealcontent" displayorder="3" src="ddmouse1.gif">
<img class="revealcontent" displayorder="2" src="ddmouse2.gif">
<div class="revealcontent" displayorder="1">Some text.</div>

The display order of the three content above is now reversed-3, 2, 1. Now, you might be thinking: "If I choose to use the "displayorder" attribute, do I have to use it on every participating content?" Definitely not! You can use this attribute only on certain content to ensure they're displayed first- other content within the group will still follow their default display order. Ok, here's an example:

<img class="revealcontent" src="ddmouse1.gif">
<img class="revealcontent" displayorder="1" src="ddmouse2.gif">
<div class="revealcontent" >Some text.</div>

Here the second content will be displayed first, with the other two being displayed in their default order. So the resulting display order is: 2, 1, 3.

There you have it.