Toggling Visibility with JavaScript

Have you ever seen a link that toggles an element’s visibility? It can blend in to create an interactive web page. JavaScript enables web designers to achieve exactly this.

Before we can actually code this effect through JavaScript, we must have an understanding of the CSS (Cascading Style Sheet) display property.

For those of you who are unfamiliar with CSS, a property of an element defines a certain attribute. For example, the CSS property width defines the width of an element.

In this tutorial, we will be focusing on two possible values for this property – block and none. A display value of none hides the element from the viewer. Block shows the element as a block-level element, which is the default setting for most text and is normally visible.

To set the display style of an element in JavaScript, we use the following line:

object.style.display = value;

where object is the element and value, in our case, is “none” or “block”. For example, let’s say we want to set an arbitrary element to have a display style of none.

object.style.display = "none";

Note that object is just a placeholder for the actual element object. Similarly:

object.style.display = "block";

enables us to set the display style to block.

Now we come across a typical question. How do we get an HTML element object through JavaScript? This is usually accomplished through:

document.getElementById('element-id');

where element-id is the id of the desired element. An id is an HTML attribute that can be set to any tag. For those of you are confused, an id can be set like this:

<p id="my-id">.

By using:

document.getElementById('my-id');

we are obtaining all content in this p tag as an HTML element object.

Now that we have an object, we can set a display style to it. For example, if we still had the above HTML markup:

document.getElementById('my-id').style.display = "none";

would make everything inside the p tag invisible to the viewer. On the other hand,

document.getElementById('my-id').style.display = "block";

makes the element visible.

By understanding the above explanation, we can now make a template for our JavaScript function, which we will call toggle.

If an element that has a display style of block (visible) needs to be toggled, we want to set it to a display style of none (not visible).

Conversely, if the element is displayed as none (not visible), we want to switch it to block (visible). This will enable a toggling effect each time a given link is clicked.

Lets write out some psuedo-code, or a template, for our JavaScript:

the toggle function:
if the element has a display style of block:
     we set it to none.
otherwise, if the element has a display style of none:
     we set it block.

And that’s all there is to it. We can find out if an element has a certain display style by using the if operator:

if ( condition ) {
     code here
}

In our case:

if ( element has a display style of block ) {
     switch display style to none
}
else if ( element has a display style of none ) {
     switch display style to block
}

It’s time to start our code:

function toggle( element ) {
     if ( element.style.display == "none" ) {
          element.style.display = "block";
     }
     else if ( element.style.display == "block" ) {
          element.style.display = "none";
     }
}

And there you have it, a fully functional toggle function. Let’s go through the code step-by-step:

  • Line 1 defines the function toggle, which takes one parameter, or something that it needs to complete its job. We name this parameter element because it represents an HTML object element.
  • Line 2 checks if the element has a display style of none.
  • If line 2 is true, then the element’s display style is set to block in line 3.
  • Line 5 checks if the element has a display style of block.
  • If line 5 is true, then the element’s display style is set to none in line 6.
  • Line 8 ends the function

Here is an example of what we can do to use this function:

toggle( document.getElementById('my-id') );

This will toggle the element which has the id my-id. For a quick HTML link implementation, one can use this code:

<a href="javascript:toggle( document.getElementById('my-id') );">This link toggles the element that has an id of my-id</a>

And that’s all there is to it. Thanks for reading!

Leave a Reply

Toggling Visibility with JavaScript