onClick=Hide/Show a Div

Posted on : 06-03-2009 | By : admin | In : Javascript

4

Ahh, Javascript; you mysterious bitch. Here’s a cool one that uses a simple function paired with an event handler assigned to a radio button to hide or make visible a div tag and its contents. Note there are two sets of functions and two ways to target those sets.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<script>
//this is the first set of functions
function hidediv(boxid){
document.getElementById(boxid).style.visibility='hidden';
}
function showdiv(boxid){
document.getElementById(boxid).style.visibility='visible';
}
//this is the second set of functions
function hidediv2(){
//single or double quotes do not matter in javascript. I like to use single quotes for
//all things javascript and double quotes for all things html
document.getElementById('yo').style.visibility='hidden';
}
function showdiv2(){
document.getElementById('yo').style.visibility='visible';
}
</script>
 
</head>
 
<body onload="hidediv2()">
 
<form name="form" id="form" action="" method="POST">
 
<!--This first pair targets the first set of functions above-->
Hide<input type="radio" name="sh" id="hide" value="1" onClick="hidediv('yo')" /><br/>
Show<input type="radio" name="sh" id="show" value="2" onClick="showdiv('yo')" /><p>
 
<!--This second pair targets the second set of functions above-->
Hide<input type="radio" name="sh" id="hide" value="1" onClick="hidediv2()" /><br/>
Show<input type="radio" name="sh" id="show" value="2" onClick="showdiv2()" /><p>
 
<div id="yo">Now you see me, soon you won't!</div></p>
 
</form>
</body>
</html>

Freakin’ sweet!

Comments (4)

GREGORY said on 28-06-2010

PillSpot.org. Canadian Health&Care.No prescription online pharmacy.Special Internet Prices.PillSpot.org. Vitamins@buy.online” rel=”nofollow”>.…

Categories: Anxiety/Sleep Aid.Antidiabetic.Womens Health.Anti-allergic/Asthma.Skin Care.Stop SmokingPain Relief.Antiviral.Mens Health.Eye Care.Mental HealthWeight Loss.Blood Pressure/Heart.Stomach.Antidepressants.Vitamins/Herbal Supplements.Antibi…
dog said on 29-08-2010

Lauren http://tofficenc98.ALLSTOCKSPORT.INFO/tag/dog+Lauren+lauren/ : dog…

Lauren…

Write a comment