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!

**thecommish3** · 05-21-2013 05:18 PM

I found this particular thread through Google, and was so thrilled to find a forum where people know what they're doing, that I signed right up.

If you read the previous messages in this thread, it's pretty easy to see what's being undertaken, and this all worked well for me. But I'm bumping this thread because I need to toggle multiple sections of the website, and in each instance, use a DIFFERENT image switch. Below is the code I have so far. But I can only use the 2008 graphics, once either of the sections is toggled.

Is there any way to add multiple images in, without writing calling a new script for each one?

Code:

<script type="text/javascript">

    function toggle_visibility(id,imgid) {
       var e = document.getElementById(id);
       if(e.style.display == '')
          {e.style.display = 'none';
          document.getElementById(imgid).src="/images/Show2008.jpg"}
       else {
          e.style.display = '';
          document.getElementById(imgid).src="/images/Hide2008.jpg"}
    }
</script>

<a onclick="toggle_visibility('2008','2008i');"><img src="/images/Show2008.jpg" width=50 id="2008i"></a>

<tbody  id="2008" style='display:none';> Table full of Stuff I'm Toggling </tbody>

<a onclick="toggle_visibility('2009','2009i');"><img src="/images/Show2009.jpg" width=50 id="2009i"></a>

<tbody  id="2009" style='display:none';> A Different Table full of Stuff that I'm Toggling </tbody>

**JMRKER** · 05-21-2013 08:51 PM

You don't really have valid HTML there.
You don't have a <table> tag, but you have TWO <tbody> tags.
I don't really understand the need for the 2 parameters of the "toggle_visibility" function
and you don't really use the CSS "visibility" parameter as much as you are using the "none" parameter.

I'm not sure this is what you are trying to do, but this is my guess as to what is needed to fix it!

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
</head>
<body>
<a onclick="toggle_visibility('2008','2008i')"> 
 <img src="/images/Show2008.jpg" width=50 id="2008i" alt="2008i"> </a> <br>

<div id="2008" style="display:none">
 <table border="1">
  <tbody>
   <tr>
    <td> Table full of Stuff I'm Toggling </td>
   </tr>
  </tbody>
 </table>
</div>

<p>&nbsp;</p>

<a onclick="toggle_visibility('2009','2009i')"> 
 <img src="/images/Show2009.jpg" width=50 id="2009i" alt="2009i"></a> <br>

<div id="2009" style="display:none">
 <table border="1">
  <tbody>
   <tr>
    <td> A Different Table full of Stuff that I'm Toggling </td>
   </tr>
  </tbody>
 </table>
</div>

<script type="text/javascript">
function toggle_visibility(id,imgid) {
  var e = document.getElementById(id);
  if(e.style.display == '') {
    e.style.display = 'none';
    document.getElementById(imgid).src="/images/Show2008.jpg";
  } else {
    e.style.display = '';
    document.getElementById(imgid).src="/images/Hide2008.jpg";
  }
}
</script>

</body>
</html>

Finally, you should really start your own thread
rather than add on to a thread that had been answered to the original OP's satisfaction.

**thecommish3** · 05-22-2013 10:20 AM

Thanks, Jmrker -

I guess I wasn't very clear on what I was trying to do. The <tbody> tags are part of a larger table - I was just pasting in the code that was relevant to what I was trying to do. And the two parameters were to identify two different IDs - one for content that was to show/hide with the toggle, and one for an image that was also to be swapped upon the toggle.

But I'll start a new thread, as you suggested, and try to define my experiment more clearly. Thanks for the reply,

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