Click Replaces One Div With Another

A comment from the "article helpful?" spot below a Willmaster article requested this: "How to replace a div with another div on clicking." Here is my response.

It takes a bit of JavaScript to replace one div with another. But nothing complicated.

Four things are required: The two divs, the JavaScript, and the link.

I'll provide an overview first, then a live example and the implementation details.

Of the two divs, one has an inline CSS declaration display:block; (the one that's displayed when the page first loads), and the other div has display:none; so it won't be display when the page first loads. The JavaScript switches the values of the two display declarations. The link engages the JavaScript.

Here's a visual:

Live Example

In the source code of this page are two divs with content. One was displayed when the page first loaded into your browser. The other div will be displayed when the link is clicked.

(Swap Divs)

Whenever the link is clicked, the display of the two divs are swapped.

Implementation Details

The two divs need to be next to each other, one above the other. It doesn't matter which is first so long they are next to each other in the source code.

The JavaScript and the link can be anywhere on the page, together or separate, above or below the div to be swapped.

Here's the code for the divs as used in the live example:

<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>

Modify the divs as needed for your implementation. Two notes:

1. Each of the divs has a unique id value (the red code and the blue code), which is referenced further below at the code for the link.

2. The CSS display property must be inline. It will be display:none; or display:block; (or other display value, like "inline" or "table"). Without the CSS inline declaration, JavaScript won't be able to change the display property with the first click; instead, the first click will establish the display property value and subsequent clicks can change it. (Describing why JavaScript doesn't just use the CSS file to change display values, but must access the display property directly, is outside the scope of this article.)

Here's the JavaScript (no modifications necessary):

<script type="text/javascript">
function SwapDivsWithClick(div1,div2)
{
   d1 = document.getElementById(div1);
   d2 = document.getElementById(div2);
   if( d2.style.display == "none" )
   {
      d1.style.display = "none";
      d2.style.display = "block";
   }
   else
   {
      d1.style.display = "block";
      d2.style.display = "none";
   }
}
</script>

And here's the link used in the example (notes follow):

<p style="text-align:center; font-weight:bold; font-style:italic;">
<a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
</p>

NOTES:

• The link is the second line, between the optional paragraph tags.

• The link calls the JavaScript function SwapDivsWithClick() with two parameters, the id values of the divs to swap. The red code and the blue code of the link match the id values of the live example divs. Which of the id values is specified first in the function's parameters isn't important, so long as both are specified.

Put the four necessary items into the source code of a test page and you'll have a link that, when clicked, swaps the div currently on the page with another div. Every time the link is clicked, the divs are swapped.

(Note: See the related Powerhouse JavaScript Function for Show/Hide article for a central function to control virtually all general hide/show requirements you may have.)

(This article first appeared in Possibilities ezine.)

Will Bontrager