Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWeb Page and Site Features

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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:

swap div coding chart from willmaster.com

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)

This div displayed when the web page first loaded.

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

Support Area – Ask Your Question Here

The "Code in articles help" forum at the Willmaster.com support area is the place to get information about implementing JavaScript and other software code found on Willmaster.com

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List
software index page

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC