JavaScript - How I show/hide a Div in firefox - Asked By saqib jahangir on 16-Feb-06 01:21 AM

Hi,
 I have a div tag with id "myDiv" ,  I have also 2 images named "Show" and "Hide". Now I want my page load first time, the div become hide, when i click on "show" It shows and when i click on "Hide" it hides. what is the code which should work on both IE and Firefox.
Thanks,
Bye.

[CODE]
<script language=javascript type='text/javascript'> 
function hidediv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideshow').style.visibility = 'hidden'; 
} 
} 
function showdiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideshow').style.visibility = 'visible'; 
} 
} 
</script> 
</head>
<body onload="javascript:hidediv()">
<div id="hideshow"><IMG SRC="mcp1.gif" WIDTH="150" HEIGHT="70" BORDER="0" ALT=""> </div>
<a href="javascript:hidediv()">hide div</a> 
<a href="javascript:showdiv()">show div</a>
[/CODE]

Anil, I liked your method of hiding an image, but my situation is tougher, perhaps impossible.

I am not a CSS or Javascript expert but have several years Dreamweaver and desktop programming experience.

My page body has HTML refreshed automatically via RSS from several external sources that I have no control over. I can't edit it. 

The code from any particular source may include text and a standard <img tag to show an image.

I want to show images contained in the code of some sources but not in the code of others, e.g. source code 1 = show img + any text, source code 2 = hide img + show text.

I can't use a CSS class like <img class=noshow , because that would require editing the external source.

It's easy to hide all images by putting this CSS in the header:

* img
{
height: 0;
width: 0;
position: absolute;
}

....but this seems to override attempts to allow some images to appear, like the following..

A powerful thing I can do in the page BODY is wrap code around each individual piece of external source, telling it to show or hide any images inside. For example...

#noshowpic {
position:absolute;
left:0px; top:0px;
width:0px;
height:0px;
overflow:hidden;
}

#showpic {
position:relative;
width:350px;
height:272px;
overflow:hidden;
}

<BODY> <div id="noshowpic">
<p>This picture is invisible. Unfortunately, the text is too.</p>
<img id="image3427" height=200 width=390 alt=Ween src="mypic.jpg" />
</div>

<div id="showpic">
<p>This second picture is visible...</p>
<img id="image3427" height=200 width=390 alt=Ween src="mypic2.jpg" />
</div> 

Any  suggestions?  Thanks.