The code embedded in this page demonstrates two methods to show and hide a <DIV> using JavaScript and CSS. It relies on the visibility property in the first <DIV> and the display property in the second. The difference is that when an object has its CSS visibility property set to "hidden", the browser will still allocate screen space for the content even though it's invisible. But when you set an object to "display:none", the browser does not allocate space on the page for its content. That's why the page needs to be re-drawn when you toggle it to 'display:block' here. The page relies on two JavaScript functions embedded in the <head> section of this page called "toggleDivVisibility" and "toggleDivDisplay". Just view the page source to see how it's all done.
Click Me! to toggle visibility:hidden <DIV> or Click Me! to toggle display:none <DIV>
|
Stuff above visibility:hidden <DIV>. This <DIV> was initially set to visibility:hidden. Stuff below visibility:hidden <DIV>. |
Stuff above display:none <DIV>. Stuff below display:none <DIV>. |
CSS Tutorial Main Page •
Tools and Scripts Menu
Copyright © 2005-2011 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission.
