Content

Hide or Show an element with CSS by JavaScript
Code:
Result:
Code:
Result:
Code:
Result:

Hide or Show an element with CSS by JavaScript

The feature of visibility property is used to specify whether an loaded element is visible or not. The visibility attribute can be modified by an onclick event through the JavaScript code parameter.

One way is to add an inline JavaScript code.

Code:

Press <button onclick="document.getElementById('hidelayer1').style.visibility ='visible';">SHOW</button> to show a "Hidden Element" below<br />

End Element...

</div>

Press <button onclick="document.getElementById('hidelayer1').style.visibility ='hidden';">HIDE</button> to hide a "Hidden Element"<br />

Hidden Element

</div>

Result:

Press to show a "Hidden Element" below
End Element...

Press to hide a "Hidden Element"
Hidden Element

Another way is to use JavaScript function.

Code:

<!--

(document.getElementById) ? pgok = true : pgok = false;

function lyrhide01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'hidden'; }

if (document.layers) { document.layers[lyr].visibility = 'hide'; }

}

function lyrshow01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'visible'; }

if (document.layers) { document.layers[lyr].visibility = 'show'; }

}

-->

</script>

Press <b onclick="lyrshow01a('hidelayer');">SHOW</b> to show a "Hidden Element" below<br />

End Element...

</div>

Press <b onclick="lyrhide01a('hidelayer');">HIDE</b> to hide a "Hidden Element"<br />

Hidden Element

</div>

Result:

Press SHOW to show a "Hidden Element" below
End Element...

Press HIDE to hide a "Hidden Element"
Hidden Element

Other CSS attribute can be used to control the layer.

Code:

<!--

(document.getElementById) ? pgok = true : pgok = false;

function lyrhide01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'hidden'; }

if (document.layers) { document.layers[lyr].visibility = 'hide'; }

}

function lyrshow01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'visible'; }

if (document.layers) { document.layers[lyr].visibility = 'show'; }

}

-->

</script>

Press <b onclick="lyrshow01a('hidelayer');">SHOW</b> to show a "Hidden Element" below<br />

End Element...

</div>

Press <b onclick="lyrhide01a('hidelayer');">HIDE</b> to hide a "Hidden Element"<br />

Hidden Element

</div>

Result:

Press SHOW to show a "Hidden Element" below
End Element...

Press HIDE to hide a "Hidden Element"
Hidden Element

©sideway

ID: 120100010 Last Updated: 1/9/2012 Revision: 0