www.webdeveloper.com
Results 1 to 8 of 8

Thread: Image Swap on Show/Hide Toggle

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    8

    Image Swap on Show/Hide Toggle

    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!

  2. #2
    Join Date
    Nov 2010
    Posts
    1,031
    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>

  3. #3
    Join Date
    Feb 2012
    Posts
    8
    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>

  4. #4
    Join Date
    Nov 2010
    Posts
    1,031
    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>

  5. #5
    Join Date
    Feb 2012
    Posts
    8
    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!

  6. #6
    Join Date
    May 2013
    Posts
    4
    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>

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    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.

  8. #8
    Join Date
    May 2013
    Posts
    4
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles