This is an example tutorial which lets the user toggle the visibilty or display property of an HTML element. This element can be any type of validate HTML element including an image (<img />), paragraph (<p>), div (<div>) or an input (<input />). The difference between display and visibility is explained in the CSS Display vs Visibility property tutorial and so won't be covered here. This tutorial is aimed at providing the JavaScript required to toggle or switch between visible or displayed[inline|block] and hidden or display[none].
Toggle Display Style Property:
In the example below the function is called and an element id is passed as a parameter. We then check to see if the element identified by the elementID var has a display value already assigned. We use a JavaScript OR (represented as || this is two "bars") statement in this example. If it is set to none we set its display as block (this is equal to the div tag), if it is block we set it to none which hides it and removes it from the flow of the page.
function display(elementID){
if(document.getElementById(elementID).style.display == '' || document.getElementById(elementID).style.display == 'none'){
document.getElementById(elementID).style.display = 'block';
}else{
document.getElementById(elementID).style.display = 'none';
}
}
Example 1 - using <input type="button" />
Toggle Visibility Style Property:
As above in the example below the function is called and an element id is passed as a parameter. We then check to see if the element identified by the elementID var has a visibility value already assigned. We use a JavaScript OR (represented as || this is two "bars") statement in this example. If it is set to hidden we set its visibility as visible, if it is visible we set it to hidden which hides it but does not' removes it from the flow of the page.
function visibility(elementID){
if(document.getElementById(elementID).style.visibility== '' || document.getElementById(elementID).style.visibility== 'none'){
document.getElementById(elementID).style.visibility= 'visible';
}else{
document.getElementById(elementID).style.visibility= 'hidden';
}
}
Example 2 - using <a href="javascript:display('elementID')" _cke_saved_href="javascript:display('elementID')">
