Website Design Blog - BlueBolt.net

Toggle Element Visibility with JavaScript

Showing and hiding elements on a web page is a popular technique, and is used on thousands of websites, in one form or another. While this could be avoided simply by the addition of new website pages, the advantage of the show/hide javascript technique is that it helps to minimise web browsing interruptions by eliminating the need to leave and load a new page.

Common uses of the show/hide technique on websites include tree hierarchy systems, which group large numbers of related items such as link structures and directory contents together to help keep them manageable. The technique is also frequently used to show extra content or provide additional information on demand to preserve valuable screen real-estate.

For example, most ‘drop down’ website menus do this, and also pretty much any time you are given the option to click to reveal detailed or extended information about something on the page.