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.

The code required to achieve this is – sort of – refreshingly simple:

function switchVis(obj) { if(obj.style.display==""){ obj.style.display="none"; } else { obj.style.display=""; } }

This function can then be called any way you like. Typically it will be activated in an element’s onclick event handler, often a link or a button – like this:

<input type="button" value="Show/Hide" onclick="switchVis(document.getElementById('theDiv'));" /> <div id="theDiv">Toggle My Visibility</div>

However, there are caveats with this specific JavaScript code – which ironically result from its versatility.

Primarily, this code pretty much relies on the initial display state of the elements you wish to manipulate to be defined in dedicated CSS rules (rather than with inline CSS styles, for example). This allows the JavaScript function to ‘reset’ the display style to its default/pre-defined value.

Let me try to clarify this…

There are other websites with JavaScript code which is syntactically very similar to what is pasted above, and on the face of it, does exactly the same job. But there are subtle yet significant differences.

Here is an illustrative example of such an alternative script:

function switchVis(obj) { if(obj.style.display=="none"){ obj.style.display="block"; } else { obj.style.display="none"; } }

Now, if you try this code out, it will work as predicted – to an extent.

For instance, if the element you want to show/hide needs the CSS display style property of inline, this code will reveal its flaw upon ‘unhiding’ the element. This is because the display property is set to block, instead of its previous state: inline.

This problem is avoided with the first script given at the top of the page, thanks to the action of nullifying the display property (i.e. [element].style.display=''). This method allows the display property to be reverted to its original state, and so removing the need to restrict it to a value such as block. However, this is only true if styles are set via CSS rules. It will not work this way if styles are defined in the element’s tag itself. Hopefully the following examples will help to explain what I mean:

Incorrect:

<html><head> <title>JavaScript Test Page</title> <script type="text/javascript"> function switchVis(obj) {if(obj.style.display==""){obj.style.display="none";}else{obj.style.display="";}} </script> </head> <body> <div id="theDiv" style="width:200px;height:200px;border:1px solid #9999aa;background-color:#d0d0d0;display:inline">Content to Show/Hide</div> <input type="button" value="Show/Hide" onclick="switchVis(document.getElementById('theDiv'));" /> </body> </html>

Correct:

<html><head> <title>JavaScript Test Page</title> <script type="text/javascript"> function switchVis(obj) {if(obj.style.display==""){obj.style.display="none";}else{obj.style.display="";}} </script> <style type="text/css">#theDiv{width:200px;height:200px;border:1px solid #9999aa;background-color:#d0d0d0;display:inline}</style> </head> <body> <div id="theDiv">Content to Show/Hide</div> <input type="button" value="Show/Hide" onclick="switchVis(document.getElementById('theDiv'));" /> </body> </html>

Posted in: CSS, JavaScript, Web Development
Tags: css, display, javascript, toggle, visibility