conditional display of html element forms

Question

Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.

Answer 1

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: