How to Show or Hide the HTML elements


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

Advertisements

Tags: , , , , , , , ,

One Response to “How to Show or Hide the HTML elements”

  1. Hitlol Says:

    cool story bro, A++, would read again

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


%d bloggers like this: