Why aren't my showHideLayers working properly?

I'm a Newbie to creating websites and although I've got a decent way into making my site I have a problem with showHideLayers.

I want to be able to click on an image and play an animation in a div, but as I have 10 animations to play I want to show/hide them at appropriate times. I've attached a couple of images to demonstrate what I want to happen and what I'm currently experiencing.

I've created a css rule using Block-display-none and changed the showHideLayers to reflect this (I changed the show/hide from 'visibility' to 'object display' so that the hidden divs wouldn't occupy space on the web page and push visible divs further down the page):



function MM_showHideLayers() { //v9.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3)

with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v=='hide')?'none':v; }

obj.display=v; }

}



This should mean that when I click on my image the animations should be displayed in the same place because the other divs aren't physically on the page. (Or this is how I understand it)

What I'm getting is a 'stacking' effect and I'm not sure why this is happening or how to fix it.

As I mentioned before I'm a newbie so please don't get too technical with the answers =] But I thank you in advance for your help.



Here's a link to the webpage: AnimTest.html#