Conditional Display Of Html Element Forms


Answer :

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;">


Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"