In a web page you can able to show or hide the HTML elements using javascipt. Very simple, see below example of how to do it.
sample.html
<html>
<body>
<p><a href=”#” onclick=”showDetails(’showid’)”>Show Details</a></p>
<p><a href=”#” onclick=”hideDetails(’showid’)”>Hide Details</a></p>
<!– set attribute id for div elements, because using this we will show or hide the below table –>
<div id=”showid”>
<table>
<tr><td> <!— am writing sample code here –>
Enter your name <input type=”text” name=”yourname”/>
Enter your age <input type=”text” name=”yourage”/>
<input type=”submit” name=”Submit”/>
</td></tr>
</table>
</div>
</body>
</html>
javascript method
<script>
function showDetails(divid)
{
document.getElementById(’showid’).style.display=”;
}
function hideDetails(divid)
{
document.getElementById(’showid’).style.display=’none’;
}
</script>
style – is an attribute of div element tag. Eg: <div style=”display:none;color:blue”/>
using this attribute we will show or hide the HTML elements.
document.getElementById(divid).style.display
document.getElementById(divid) – will return the div element as object. with that object you can access the attribute style and property display. Property display has several values like block, none, inline with these values you can do the necessary actions. Do you want more details about display property values read here http://www.w3schools.com/htmldom/prop_style_display.asp
Tags: display property values, getElementById, hide div, HTML elements, show div, show or hide div, show or hide HTML element, style attribute, style display
June 7, 2009 at 8:41 pm |
cool story bro, A++, would read again