Sideway
BICK BLOG from Sideway
|
Link:http://output.to/sideway/default.asp?qno=120100010 Hide/Show element w/CSS &JavaScript Hide or Show an element with CSS by JavaScriptThe 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:<div style="margin:5px;background-color:White"> Press <button onclick="document.getElementById('hidelayer1').style.visibility ='visible';">SHOW</button> to show a "Hidden Element" below<br /> End Element... </div> <div id="hidelayer" style="visibility:hidden;margin:5px;background-color:Aqua"> 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:<script type="text/javascript"> <!-- (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> <div style="margin:5px;background-color:White"> Press <b onclick="lyrshow01a('hidelayer');">SHOW</b> to show a "Hidden Element" below<br /> End Element... </div> <div id="hidelayer" style="visibility:hidden;margin:5px;background-color:Aqua"> 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:<script type="text/javascript"> <!-- (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> <div style="margin:5px;background-color:White"> Press <b onclick="lyrshow01a('hidelayer');">SHOW</b> to show a "Hidden Element" below<br /> End Element... </div> <div id="hidelayer" style="float:left;visibility:hidden;margin:5px;background-color:Aqua"> 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 BICK Blog 09/01 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
