The Netlobo logo - a Nevada desert landscape

Showing/Hiding a DIV using the Off-Left Method

A Javascript function for hiding a DIV by moving it off the left of the browser window

Published Feb 8, 2007 by lobo235
Last updated on Jul 3, 2007

We have already discussed hiding a DIV element using JavaScript on netlobo.com before. Today we will introduce another method for hiding a DIV that can be very useful because it is screen-reader friendly. Using other methods to hide a DIV can make a screen-reading program think that the content inside of the DIV should no longer be read because it is hidden. This new div hiding method does not actually hide the DIV but instead moves it off the screen where the user will not see it. Here is the function that gets the job done:

function toggleDivOL( elemID )
{
    var elem = document.getElementById( elemID );
    if( elem.style.position != 'absolute' )
    {
        elem.style.position = 'absolute';
        elem.style.left = '-4000px';
    }
    else
    {
      elem.style.position = 'relative';
        elem.style.left = '0px';
    }
}

To use the toggleDivOL() function just call it using the id of the element you wish to hide. Each time you call the function the element's visibility will toggle between being shown and hidden. This behavior makes it great for use with a link or a button.

We have setup an example page that shows the function being used. Here is the example.

The function assumes that your DIV will start off being shown on the page. There have been multiple netlobo.com readers who have requested a way for the DIV to start off being hidden. The easiest way to accomplish this is to call the toggleDivOL() function when the page loads. You can do this using window.onload or body.onload or for a more elegant solution see our window.onload manager article.

10 comments for this article.

Other great Web Development and Programming articles on Netlobo.com:
Displaying a percentage bar using PHP
Double Form Submit Problem
Fade the Background Color of an Element using Javascript