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.


<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”>
<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”/>

javascript method
function showDetails(divid)
function hideDetails(divid)
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) – 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

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: Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: