Show Hide Layers using CSS

CSS code :

#realtooltip {
display: block;
position:relative;
width:100%;
top:0px;
z-index:0;

}
#realtooltip1 {
display: none;
position:relative;
width:100%;
top:0px;
z-index:0;
}

Javascript code:



Two Radio Buttons


<input name="diff" type="radio" id="differentSAYesc" onclick="MM_showHideLayers('realtooltip','','show'); MM_showHideLayers('realtooltip1','','hide')" value="yes" checked="checked" />

<input name="diff" type="radio" id="differentSANo" value="no" onclick="MM_showHideLayers('realtooltip1','','show'); MM_showHideLayers('realtooltip','','hide')" />


Two divs

first div

second div

Above code works in IE7, IE8, Mozilla FF 3, Mozilla FF 3.5.
If you will not give the style="display:none;" in second div as I give above, then it works in IE8 but not work in IE7.
You must include css code in a css file to work properly, if you will include this in same page then it again gives problem in IE7.