show, hide control with javascript by style.display and style.visibility

<html>
<header>
<title>javascript</title>
<script type=”text/javascript”>
function div_visible(id,visible_status)
{
var div=document.getElementById(id);
if(visible_status)
{
div.style.display=””;
}
else
{
div.style.display=”none”;
}
}
function image_visible(id,visible_status)
{
var image=document.getElementById(id);
if(visible_status)
{
image.style.visibility=”visible”;
}
else
{
image.style.visibility=”hidden”;
}
}
</script>
</header>
<body>
<div>
<input type=”button” value=”show div” onclick=”div_visible(‘theDiv’,true);”/>
<input type=”button” value=”hide div” onclick=”div_visible(‘theDiv’,false);”/>
<input type=”button” value=”show image” onclick=”div_visible(‘theImage’,true);”/>
<input type=”button” value=”hide image” onclick=”div_visible(‘theImage’,false);”/>
<input type=”button” value=”show image” onclick=”image_visible(‘theImage’,true);”/>
<input type=”button” value=”hide image” onclick=”image_visible(‘theImage’,false);”/>
<div id=”theDiv”>
</div>
</div>
</body>
</html>

<html>

<header>

<title>javascript</title>

<script type=”text/javascript”>

function div_visible(id,visible_status)

{

var div=document.getElementById(id);

if(visible_status)

{

div.style.display=””;

}

else

{

div.style.display=”none”;

}

}

function image_visible(id,visible_status)

{

var image=document.getElementById(id);

if(visible_status)

{

image.style.visibility=”visible”;

}

else

{

image.style.visibility=”hidden”;

}

}

</script>

</header>

<body>

<div>

<input type=”button” value=”show div” onclick=”div_visible(‘theDiv’,true);”/>

<input type=”button” value=”hide div” onclick=”div_visible(‘theDiv’,false);”/>

<input type=”button” value=”show image” onclick=”div_visible(‘theImage’,true);”/>

<input type=”button” value=”hide image” onclick=”div_visible(‘theImage’,false);”/>

<input type=”button” value=”show image” onclick=”image_visible(‘theImage’,true);”/>

<input type=”button” value=”hide image” onclick=”image_visible(‘theImage’,false);”/>

<div id=”theDiv”>

<img id=”theImage” src=”http://vnexpress.net/Files/Subject/3B/A1/41/40/250.jpg”/&gt;

</div>

</div>

</body>

</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s