Powerhouse JavaScript Function for Show/Hide

There is a handy, short, powerhouse JavaScript function for showing and hiding divs (or other HTML tag containers, like span, table, etc).

As programmers gain experience over the years, the tools they use evolve. With 26 years experience, there are a few in my toolbox.

The show/hide JavaScript function in this article is one of them.

Show or hide as many divs as desired — with one JavaScript function call. Simply feed the ids and actions to the function and it does the rest.

Hide or reveal divs that are popups or sliders, divs that contain an iframe, span tags with an image, or entire tables.

Use the function for virtually all your hide/show needs. Here are idea stimulators:

• Use it to show a div with a click. Optionally, simultaneously (i) hide the link or button clicked on and (ii) reveal a link or button to hide the div again.

• Reveal a bunch of divs each with their own "hide" button.

• Reveal one or more divs with one click, or when the mouse moves over an existing div, or when the site visitor has been on the page for a certain amount of time.

Adjust the display property of any number of divs with one call to the PowerhouseShowHide() function.

Some demonstrations are further below. But first, here's the Powerhouse Show/Hide JavaScript function.

The JavaScript Function

The JavaScript PowerhouseShowHide() function needs to be somewhere on the page for it to be used. It can be hard coded into the page or imported from an external file.

<script type="text/javascript">
function PowerhouseShowHide()
{
   // Will Bontrager Software LLC - https://www.willmaster.com/
   if( ! arguments.length ) { return; }
   for(var i=0; i< arguments.length; i++)
   {
      var ta = arguments[i].split("=",2);
      document.getElementById(ta[0]).style.display = ta[1];
   }
}
</script>

No customization of the PowerhouseShowHide() function is required.

Show/Hide Demonstrations

Each of these demonstrations contain the source code for you to duplicate it on your web page. Only the demonstration code is provided. Detailed how-to information follows the demonstrations.

(The Powerhouse Show/Hide JavaScript function must be somewhere on the page for the demonstrations to work.)

Demonstration A —

Clicking on a link will (1) display a div, (2) hide the link that was clicked, and (3) show a link to hide the div.

Link to click: Show Content Hide Content

Here is the Demonstration A source code.

<p>
Link to click: 
<span id="demo-1-show" style="display:inline;"><a href="javascript:PowerhouseShowHide('demo-1-div=block','demo-1-show=none','demo-1-hide=inline')">Show Content</a></span>
<span id="demo-1-hide" style="display:none;"><a href="javascript:PowerhouseShowHide('demo-1-div=none','demo-1-show=inline','demo-1-hide=none')">Hide Content</a></span>
</p>
<div id="demo-1-div" style="display:none; background-color:ivory; border:1px solid #666; border-radius:.5em; padding:.5em; font-size:1em;">
Demonstration <code>div</code> shown/hidden by clicking on the <span class="nowrap">relevant link.</span>
</div>

Demonstration B —

This is similar to Demonstration A. The difference is buttons are used instead of text links.

Link to click:

Here is the Demonstration B source code.

<p>
Link to click: 
<span id="demo-2-show" style="display:inline;"><input type="button" value="Show Content" onclick="PowerhouseShowHide('demo-2-div=block','demo-2-show=none','demo-2-hide=inline')"></span>
<span id="demo-2-hide" style="display:none;"><input type="button" value="Hide Content" onclick="PowerhouseShowHide('demo-2-div=none','demo-2-show=inline','demo-2-hide=none')"></span>
</p>
<div id="demo-2-div" style="display:none; background-color:ivory; border:1px solid #666; border-radius:.5em; padding:.5em; font-size:1em;">
Demonstration <code>div</code> shown/hidden by clicking on the <span class="nowrap">relevant button.</span>
</div>

Demonstration C —

Clicking the button will show a div. When the div is shown, the button is hidden.

The div contains a "close" link. When the div is hidden, the button will be shown.

Here is the Demonstration C source code.

<p id="demo-C-show" style="display:block;">
<input type="button" value="Show Content & Hide This Button" onclick="PowerhouseShowHide('demo-C-div=block','demo-C-show=none')">
</p>
<div id="demo-C-div" style="display:none; background-color:ivory; border:1px solid #666; border-radius:.5em; padding:.5em; font-size:1em;">
Demonstration C <code>div</code> shown by clicking on the button (which is now hidden). 
To close this div and restore the button, 
<a href="javascript:PowerhouseShowHide('demo-C-div=none','demo-C-show=block')">click this <span class="nowrap">close link</span></a>.
</div>

Demonstration D —

Clicking the link of this demonstration will show 3 divs. Each of the divs has a "close" link to close that particular div.

Three divs with "close" links.

Here is the Demonstration D source code.

<p>
<a href="javascript:PowerhouseShowHide('one=block','two=block','three=block')">Three divs with "close" links.</a>
</p>
<div id="one" style="display:none; background-color:ivory; border:1px solid #666; border-radius:.5em; padding:.5em; font-size:1em; margin:.25em 0 .25em 0;">
The first of three divs opened with a click on the relevant link. To close this individual div, <a href="javascript:PowerhouseShowHide('one=none')">click this close link</a>.
</div>
<div id="two" style="display:none; background-color:ivory; border:1px solid #666; border-radius:.5em; padding:.5em; font-size:1em; margin:.25em 0 .25em 0;">
The second of three divs opened with a click on the relevant link. To close this individual div, <a href="javascript:PowerhouseShowHide('two=none')">click this close link</a>.
</div>
<div id="three" style="display:none; background-color:ivory; border:1px solid #666; border-radius:.5em; padding:.5em; font-size:1em; margin:.25em 0 .25em 0;">
The third of three divs opened with a click on the relevant link. To close this individual div, <a href="javascript:PowerhouseShowHide('three=none')">click this close link</a>.
</div>

Detailed How-To Information

In essence, you give PowerhouseShowHide() a list of things it can do and it does them.

The things it can do is change the CSS display property value for any HTML element where display is a valid CSS property. This W3schools page lists valid values with descriptions.

It expects to receive instructions in the ID=Value format. Multiple ID=Value sets are comma-separated. Examples:

PowerhouseShowHide('an-id=block')
PowerhouseShowHide('an-id=block','another-id=none')
PowerhouseShowHide('one=block','two=none','three=inline','four=table')

PowerhouseShowHide() updates the display property value of the container according to the information in each ID=Value set.

The "ID" part of the ID=Value set is the id of the div or other HTML element with an inline CSS display property. (The CSS display declaration needs to be inline for every div or other HTML container that is to be shown or hidden with the PowerhouseShowHide() function.)

The "Value" part of the ID=Value set is the value for the display property. It can be none (for hiding the element), block, inline, table, or any other valid value for the display property.

The source code for the demonstrations earlier in this article contain examples of use with text links and with buttons. For clarity, here are a couple examples with only essential code. Div id values are colored blue and display values are colored red.

Remember, the JavaScript function PowerhouseShowHide() needs to be available on the page for these to work.

This example has a link to reveal a hidden div. When the link is clicked, the div's display value is changed from none to block.

<div id="hidden-div" style="display:none;">Content to reveal</div>
<a href="javascript:PowerhouseShowHide('hidden-div=block')">Click to reveal</a>

This example has a link that, when clicked, will hide itself and reveal two divs.

<p id="p-with-link" style="display:block;">
<a href="javascript:PowerhouseShowHide('p-with-link=none','div-one=block','div-two=block')">Click to reveal</a>
</p>
<div id="div-one" style="display:none;">Content in one div</div>
<div id="div-two" style="display:none;">Content in another div</div>

With one call to the PowerhouseShowHide() function, you can change the CSS display property of any number of divs (and other HTML containers) to any valid display value.

(This article first appeared in Possibilities ezine.)

Will Bontrager