brennanwilcox.net

Hiding elements on a page (typically with the “display:none” property) can be a very useful design tool, allowing you to show them (and hide other elements, etc.) when a link is clicked that fires a javascript function. I have used this commonly when I have a lot of data to display on one page but need to limit the overall page length. Using a simple javascript toggle that changes the display style of the elements (i.e., divs containing text or pictures) makes it easy to replace one piece of content with another in the same position on the page.

One problem with setting an element’s display property in your html and then using javascript to change that property is that it does not “degrade gracefully”, as they say. In other words, if you hide an item with display:none, and then depend on javascript to show it, that element will never be seen by someone who has disabled javascript. This is where using onload can be useful - if you hide the element onload, it will be hidden for those who have javascript enabled (and can view the content with one of your javascript functions), but will still appear for those who have it disabled.

Note, however, that hiding elements using “display:none” creates an accessibility problem. If you use this property, you can’t expect someone with a screenreader, for example, to have access to the content. If you’re developing a site for someone who cares at all about accessibility, you’ve got to do more homework and use another technique.