Div tags to appear on event, between other divs...

gday

i have three divs for example
<div id="div1">test1</div>
<div id="div2" style="visibility: hidden;">test2</div>
<div id="div3">test3</div>

i want it such that on page load, test1 and test3 are directly on top/nbeneath eachother, with no visible space for the hidden div2.. i tried doing so with poisiton: aboslute, but then, on an event to make div 2 appear, it would be randomly around the page depending on the browser..

i was wondering if there were some css calls/js that could make there not be space between div1 and div3 while div2 is hidden, but then on click, it puts itself between the two properly.. (and then when second event, removes it again)

i hope i explained this properly

thanks if anyone can help
regards

Use the 'display' property rather than 'visibility'.

style="display:block|none;"

alright
give that a try

what does display: block specifically do if i may ask

It displays the element as a block level one.

http://www.quirksmode.org/css/display.html