How to show and hide HTML elements using Javascript

This short article give explain how to show/hide HTML elements using jscript.There are two examples : first example use <div> tag to show and hide text when somebody click on link, second example show and hide table when somebody click on radio button. To find more javascript effects follow the link.

Show or hide text with click on hyperlink


To hide HTML element it should be inside <div>.

<div> tag should have style attribute in which is defined DISPLAY property.
DISPLAY property can have value "none" or "block".

If DISPLAY property value is none - the element will not be displayed.
If DISPLAY property value is block - the element will be displayed.

How it work (click on Show/Hide):
Show/Hide

This text was hidden

This example hide or show text "This text was hidden" when hyperlink Show/Hide is clicked.

Related links

Hide or show div element - tutorial how to hide div tag with slightly simpler samples and code examples

Hide table row with javascript - How to dynamically hide or show entire HTML table and how to hide or show only one row in HTML table

Show or hide multiple divs - how to make one jscript function which can be called from multiple places on web page and how to hide multiple divs with only one click action

Demonstration of basic web effects with jQuery - in this article you can find demos and sample code for basic effect (hide, show, fadeIn, fadeOut, slide down, slide up and animate effect) functions in jQuery.

Code for example:

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

We have hyperlink "Show/Hide" (inside <a> tag) which on click call Javascript function ShowHide.
JavaScript function ShowHide display or hide <div> with id "HiddenDiv".

Show <div> - document.getElementById(divId).style.display='block';

Hide <div> - document.getElementById(divId).style.display = 'none';

Inside <div> can be anything, in our case it is simple text but can be table, another <div> element, image...

If you want that your link text change to "Show" when a HTML element need to be showed and text "Hide" when HTML element need to be hided visit: javascript: Changing text

There is a link for simpler explanation how to Hide or show div element and change div visibility with three more demos.

Show or hide table when somebody click on radio button

In this example we will show first table when user choose radio button A with text "You select A,table tblA is shown". If user choose radio button B second table is displayed (tblB) and if radio button C is clicked third table is displayed.

You can test how it is working below:

Please, select option

ABC

You select A,table tblA is shown

You select B, table tblB is shown

You select C, table tblC is shown

Here is code:

<script type="text/JavaScript">

<!--
function show(id)
{
     if (document.getElementById(id).style.display == 'none')
     {
          document.getElementById(id).style.display = '';
     }
}
//-->

<!--
function hide(id)
{
          document.getElementById(id).style.display = 'none';

}
//-->
</script>


<table cellspacing="1" cols="3" border="0">
    <tbody>
    <tr valign="top" align="left">
      <td width="202"><b>Please, select option</b></td>

      <td width="481">A
        <input type="radio" name="Option" onfocus="hide('tblB');hide('tblC');show('tblA');">
        B
        <input type="radio" name="Option"  onfocus="hide('tblA');hide('tblC');show('tblB');return true;">
        C      
        <input type="radio" name="Option" onfocus="hide('tblA');hide('tblB');show('tblC');return true;">
      </td>
    </tr>
    </tbody>
  </table>
  <br>
  <table id="tblA" style="DISPLAY: none" cols="1" cellpadding="2">
    <tbody>
    <tr valign="top" align="left">
     
    <td>
      You&nbsp;select A,
      table
      tblA is shown&nbsp;
      </td>
    </tr>
    </tbody>
  </table>
  <table id="tblB" style="DISPLAY: none" cols="1" cellpadding="2">
    <tbody>
    <tr valign="top" align="left">
      <td>
       You&nbsp;select B, table tblB
       is shown&nbsp;
      </td>
    </tr>
    </tbody>
  </table>
   <table id="tblC" style="DISPLAY: none" cols="1" cellpadding="2">
    <tbody>
    <tr valign="top" align="left">
      <td>
       You&nbsp;select C, table tblC
       is shown&nbsp;
      </td>
    </tr>
    </tbody>
  </table>

Let's take a look at code. JavaScript function show show HTML element.
Javascript function hide hide HTML element.
When user click on first radio button (A) table A is displayed while table B and table C are hided.