Container div over its content

Question

I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.

//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code

I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.

Answer 1

Delete div when slide up.
Add div when slide down.

Good luck =)

Answer 2

For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!

Marco

Answer 3

I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.