Image Swap on Show/Hide Toggle

**bluecollar01** · 03-21-2012 12:14 PM

Hi All,

Noob at javascript and need some help with changing an image onclick to show/hide DIV(s).

Here is my script to show/hide DIV9s):

Code:

<script language="javascript" type="text/javascript">
      function toggleSpecific(elementid) {
        var node = document.getElementById(elementid);
        if(node.style.display == '') {
          node.style.display='none';
        }
        else {
          node.style.display = '';
        }
      }
	  </script>

Here is image area and hidden DIV(s) of which there are 4:

Code:

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide1');" title="Hide1"><img src="images/expand_btn.png" alt="Expand/Collapse" width="25" height="24" border="0" style="float:right; margin:-5px 20px 0px 0px;" /></a>Button Title Here</div>

<div id="hide1" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>

Any help on how to best accomplish this would be appreciated.

Thanks in advance for your feedback!

**xelawho** · 03-21-2012 03:08 PM

is this what you mean?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
</head>
<body>
<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide1');" title="Hide1"><img id="mybutt" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide1" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
<script type="text/javascript">
function toggleSpecific(elementid) {
        var node = document.getElementById(elementid);
        if(node.style.display == 'block') {
          node.style.display='none';
		  document.getElementById("mybutt").src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png"
        }
        else {
          node.style.display = 'block';
		 document.getElementById("mybutt").src="http://www.clker.com/cliparts/h/F/b/D/p/V/power-on-button-th.png" 
        }
      }
</script>
</body>
</html>

**bluecollar01** · 03-21-2012 03:17 PM

Thanks xelawho.

It's very close. I have four separate images/hidden DIV(s) like below, but don't know how to swap each separately.

Thanks for your feedback on how to accomplish this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>

<script type="text/javascript">
function toggleSpecific(elementid) {
        var node = document.getElementById(elementid);
        if(node.style.display == 'block') {
          node.style.display='none';
		  document.getElementById("mybutt").src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png"
        }
        else {
          node.style.display = 'block';
		 document.getElementById("mybutt").src="http://www.clker.com/cliparts/h/F/b/D/p/V/power-on-button-th.png"
        }
      }
</script>

</head>
<body>
<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide1');" title="Hide1"><img id="mybutt" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide1" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide2');" title="Hide2"><img id="mybutt" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide2" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide3');" title="Hide3"><img id="mybutt" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide3" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide4');" title="Hide4"><img id="mybutt" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide4" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>
</body>
</html>

**xelawho** · 03-21-2012 04:40 PM

not sure I get it, but is it like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>

<script type="text/javascript">
function toggleSpecific(elementid, buttid) {
        var node = document.getElementById(elementid);
        if(node.style.display == 'block') {
          node.style.display='none';
		  document.getElementById(buttid).src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png"
        }
        else {
          node.style.display = 'block';
		 document.getElementById(buttid).src="http://www.clker.com/cliparts/h/F/b/D/p/V/power-on-button-th.png"
        }
      }
</script>

</head>
<body>
<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide1','mybutt1');" title="Hide1"><img id="mybutt1" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide1" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide2','mybutt2');" title="Hide2"><img id="mybutt2" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide2" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide3','mybutt3');" title="Hide3"><img id="mybutt3" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide3" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>

<div class="why">
<div class="button"><a href="javascript:toggleSpecific('hide4','mybutt4');" title="Hide4"><img id="mybutt4" src="http://www.clker.com/cliparts/y/P/U/j/3/e/power-button-on-green-background-th.png" alt="Expand/Collapse" width="25" height="24" border="0" /></a>Button Title Here</div>
<div id="hide4" style="margin:0px 11px 0px 11px; display: none;">
<p class="subhead_01">Subhead</p>
<p>This is a paragraph.</p>
</div>
</div>
</body>
</html>

**bluecollar01** · 03-21-2012 04:57 PM

xelawho this works great. I'm completely lost when it comes to javascript and I really appreciate you taking the time to help me out.

You're the bomb!

Thread: Image Swap on Show/Hide Toggle

Thread Tools

Display

Image Swap on Show/Hide Toggle

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions