conditional display of html element forms

What worked:

You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.

Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.

By default, for all elements where a explicit visibility attribute is not given, visibility is considered to be visible.

To make the button invisible, you need to add visibility:hidden to the button.

You can do it two ways:

  1. In the code for the divs, make then "invisible by default" by adding style='visibility:hidden'.

  2. Add another javascript function that is called on load of the page, and makes both the divs invisible:

    function hideBoth()  {  
   document.getElementById("cont1").style.visibility="hidden";  
   document.getElementById("cont2").style.visibility="hidden";   
}

Call it on load of your page: <body onload='hideBoth()'>


This line:

document.getElementById("cont1").style.visibility="hidden";

Adds this:

style="visibility: hidden;"

to this:

<div id="cont1">

to make it look like this:

<div id="cont1" style="visibility: hidden;">

You can do this yourself, just by adding that attribute to your html tag.

Oh yeah, and this:

<div id="cont1">

is the same as this:

<div id="cont1" style="visibility: visible;">

Tags:

Javascript

Visibility

Conditional

Recent Posts