This is one of those things that makes me chortle, cool as the magic sliding DIV is. You'll watch people go to a lot of pain and endless JavaScript/CSS wrangling to do this. Then they'll turn around and gripe how Flash, which takes about 35 seconds to do this in is worthless.

This comes from Harry Maugans; I picked it up at duggmirror.com by following this link. He's written a long and well-thought tutorial, so I won't try to duplicate that bit.

What I have done is extended the functionality a wee [emphasize the wheeeee!] bit; the version of it here is meant to be used with multiple overlaying DIVs displaying over each other on a single page.

Here's a working baseline example of the existing stuff:



Slide DIV1 Down | Slide DIV1 Up | Toggle DIV1 Slide |  Toggle DIV2 Slide

And here's one with the DIVs overlapping. I've created two new functions, a 'multiple' slide and a 'view all'. It should be noted they're powered by an array embedded on the page that you'll need to fill in appropriately:

whichdivs = new Array("div_x","div_y");
var thismany = whichdivs.length - 1;

Toggle DIV_X |  Toggle DIV_Y |  View All

• Surprisingly, this works in IE6. Unsurprisingly, it's 'chunky'.
• There seem to be issues with defining overall styles for the DIVs in a separate sheet; it works better if definitions are embedded directly in the embed tag.
• height for the DIV must be declared to work properly; DIVs are also best at the same height.