www.webdeveloper.com
Results 1 to 3 of 3

Thread: Show/Hide toggle - use multiple image swaps

  1. #1
    Join Date
    May 2013
    Posts
    4

    Show/Hide toggle - use multiple image swaps

    Hello all,

    Below is a script I've set up that is working successfully. It toggles a portion of content in a table to show/hide multiple rows, upon a mouseclick over an image. The image reads "Show 2008", and when clicked, it also swaps to another image that reads "Hide 2008", and then back to "Show 2008" when the toggle is clicked again to hide the content. So this is all working already.

    However, I'd like to add a DIFFERENT image toggle, later on in the table, using a pair of images that will read "Show 2009" or "Hide 2009", and then another image swap for "Show 2010", "Hide 2010", and so on. Is this possible to add to my coding without using multiple additional javascripts?

    Here's what I have now:

    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>
    
    <table border=1 width=400 cellpadding=30>
        <tr>
           <td width=60> <a onclick="toggle_visibility('2008','2008i');"><img src="/images/Show2008.jpg" width=50 id="2008i"></a></td>
           <td> This is already showing </td>
        </tr>
    <tbody  id="2008" style='display:none';>
        <tr>
            <td></td>
            <td> A Bunch of Content from 2008 That Is Shown / Hidden </td>
        </tr>
    </tbody>
        <tr>
           <td><a onclick="toggle_visibility('2009','2009i');"><img src="/images/Show2009.jpg" width=50 id="2009i"></a></td>
           <td> This is also already showing </td>
        </tr>
    <tbody id="2009" style='display:none';>
        <tr>
           <td></td>
           <td> This 2009 data also gets shown / hidden, but I'd sure like to get that second image to change also!   Currently, it just switches this toggle image back to the 2008 Show/Hide JPGs.</td>
        </tr>
    </tbody>
    </table>

  2. #2
    Join Date
    Oct 2010
    Location
    UK
    Posts
    17
    Sure. Just use the id you're passing into the JavaScript function and pop it into the src path like so:

    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/Show"+id+".jpg";
            }
            else {
              e.style.display = '';
              document.getElementById(imgid).src="/images/Hide"+id+".jpg";
            }
        }
    
    </script>
    Let me know if this works for you.

  3. #3
    Join Date
    May 2013
    Posts
    4
    Wow, Aralus - just a few keystrokes and I've got it! Thanks so much! I had no idea the solution would be that simple.

    This place rules.

Thread Information

Users Browsing this Thread

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

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