SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Syntax assistance

    Ok i know this is all over the web and i have searched but i'm still stuck on this one. I have a <div> tag that shows and hides an image for the onclick function. I have two functions below and it all worked when i had two images so you could click one and click the other to show and then to hide. I actually am trying to change the code so that i only have ONE button that will toggle from 'expanded' to 'collapsed' when someone clicks the button to show the image. Here is what i have. I think i have to combine the 2 functions into one with an if statement similar to this but i'm not sure.

    THIS IS WHAT I"M NOT SURE OF
    Code:
    function ShowhideImg(imgOther, expander){
        var el = document.getElementById(imgOther);
        if (el.style.display="none")  {
            document.getElementById(expander).src = "images/expand.gif";  }
        else  {
             document.getElementById(expander).src = "images/collapse.gif"; }
        else if (el.style.display="block") {
             document.getElementById(expander.src ="images/collapse.gif" }
           else {
             document.getElementById(expander.src ="images/expand.gif" }
       }
    <div id="imgOther" runat="server"></div>
     <img src="images/expand.gif" runat="server" id="expander" style="cursor:pointer" onclick="showHideImg('imgOther', 'expander');" />
    THIS BELOW IS WHAT WORKS WITH TWO ICONS
    Code:
    function showImg(imgOther, expander){
        var el = document.getElementById(imgOther);
        el.style.display="block";   
    }
    
    function hideImg(imgOther, expander){
        var el = document.getElementById(imgOther);
        el.style.display="none";   
    } 
    
    will hide and show ONLY if i have two buttons with different onclick
    <div id="imgOther" runat="server"></div>
    
    <img src="images/expand.gif" id="expander" style="cursor:pointer" onclick="showImg('imgOther', 'expander'); " />
    <img src="images/collapse.gif" style="cursor:pointer" onclick="hideImg('imgOther');" />

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your logic is wrong; you're using '=' where you want to use '=='. In your current logic, the first if statement always returns 'true'.

    Remember; '=' assigns the right-hand value to the left-hand variable. '==' checks if the right-hand operator is equal to the right-hand operator.

    Try something like this:

    Code:
    <script type="text/javascript">
    function hideShow (theElement, theImage) {
      var el = document.getElementById(theElement); 
      if (!el.style.display || el.style.display == 'none') {
        el.style.display = 'block';
        theImage.src = 'collapse.gif';
      } else {
        el.style.display = 'none';
        theImage.src = 'expand.gif';
      }
    }
    </script>
    
    <div id="foo">bla</div>
    <img src="collapse.gif" alt="" onclick="hideShow('foo',this);">

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks Ize.


Bookmarks

Posting Permissions

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