Next »
845/1956
« Previous

Show and hide element in JavaScript

Description

The following code shows how to show and hide element.

Example


<html>
<head>
<script language="JavaScript">
function checkBold()<!-- w ww.j av  a  2  s  .  c o  m-->
{
var thistag, parentTag;
thistag = window.event.srcElement.tagName;
parentTag = window.event.srcElement.parentElement.tagName;

if (thistag == "H1" && parentTag == "BODY")
{

if(document.all(window.event.srcElement.id + "p").style.display == "none")
{
document.all(window.event.srcElement.id + "p").style.display = "";
}
else
{
document.all(window.event.srcElement.id + "p").style.display = "none";
}
}
}
</script>
</head>
<body onclick="checkBold()">
<h1 id="head1">Heading One</h1>
<p id="head1p" style="display:none">111111111111111</p>
<h1 id="head2">Heading Two</h1>
<p id="head2p" style="display:none">22222222</p>
<h1 id="head3">Heading Three</h1>
<p id="head3p" style="display:none">3333</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Show and hide element in JavaScript
Next »
« Previous