Show/Hide Table Problem

Posting Whiz in Training

210 posts since Jul 2009

Reputation Points: 7

Solved Threads: 1

The problem is the way you get image source (document.getElementById.("showHide").src == "Hide Table.bmp")). The return value may include all the domain name, so it will never be equal to what you are trying to do. You can try...

if (document.getElementById.("showHide").src.match(/Hide[^\.]*\.bmp/i)) {
}

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
     
    <html>
     
    <head>
    <title></title>
    </head>
     
    <body>
    <script LANGUAGE="JavaScript">
    
    function showHideTable() 
	{
		var control=document.getElementById('showHide');
		var control2=document.getElementById('TableShowHide');
		if (control2.style.visibility == "hidden")
		{
			control2.style.visibility == "visible";
			contorl.src="Hide Table.bmp";
		}
		
		else
		{
			control2.style.visibility == "hidden";
			contorl.src="Show Table.bmp";
		}
	}
    </script>
    <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()">
     
    <table id="TableShowHide" border=1 cellpadding=4 CELLSPACING=0>
    <tr>
    <td>ROW 2 - HEADER</td>
    </tr>
    <tbody id="TableRow" style="display:none">
    <tr><td colspan="2">ROW 2 SubDATA...</td></tr>
    <tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
    </tbody>
    </table>
     
    </body>
    </html>

Try this code... I have not tested this code but it is supposed to work.

rajbdilip

Newbie Poster

15 posts since Nov 2010

Reputation Points: 10

Solved Threads: 1

Hi,

Thanks a lot - There seems to be an issue when using the "visibility" argument in an IF statement. At least I think that's the problem... I changed your code a bit so it was more precise but it doesn't seem to work. hmm..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script LANGUAGE="JavaScript">
            function showHideTable() {
                var control=document.getElementById('showHide');
                var control2=document.getElementById('TableShowHide');

                if (control2.style.visibility == "hidden") {
                    control2.style.visibility == "visible";
                    control.src="Hide Table.bmp";
                }
                else if (control2.style.visibility == "visible") {
                    control2.style.visibility == "hidden";
                    control.src="Show Table.bmp";
                }
            }
        </script>

        <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()" alt="Show/Hide">

        <table id="TableShowHide" border=1 cellpadding=4 CELLSPACING=0>
            <tr>
                <td>ROW 2 - HEADER</td>
            </tr>
            <tbody id="TableRow" style="display:none">
                <tr>
                    <td colspan="2">ROW 2 SubDATA...</td>
                </tr>
                <tr>
                    <td colspan="2">ROW 2 SubDATA1...</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Posting Whiz in Training

210 posts since Jul 2009

Reputation Points: 7

Solved Threads: 1

What browser are you using? I am guessing you are using IE. It is a known bug that IE does not allow you to dynamically change the value of visibility via JavaScript. The way to workaround this is to use CSS. Create a class in CSS for show and hide, then use JavaScript to swap the class name.

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

Hi Taywin,

Ya I'm testing it with IE at the moment - I'm not really sure I catch you - do you mean use the example that you posted above?

The problem is the way you get image source (document.getElementById.("showHide").src == "Hide Table.bmp")). The return value may include all the domain name, so it will never be equal to what you are trying to do. You can try...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) if (document.getElementById.("showHide").src.match(/Hide[^\.]*\.bmp/i)) {}if (document.getElementById.("showHide").src.match(/Hide[^\.]*\.bmp/i)) { }

Thanks,
Ashton.

Posting Whiz in Training

210 posts since Jul 2009

Reputation Points: 7

Solved Threads: 1

Ashton:

Yes and no. Yes if you are keeping your original format. No if you want a better improvement.

1)You should put script inside head tag even though there is nothing wrong putting it in the body tag.
2)You should put style tag inside head tag as well.
3)The way you do would not work if both of your images have not been loaded on the page already. You could load them up and hide them somewhere in the page, and then use the tag you are working to show it. Or you dynamically change the DOM, but that may be slow for big image.

I modified your code as below...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title></title>

  <style type="text/css">
  .hideImg {
    display: none;
    visibility: hidden;
  }
/* You do not really need this showImg class, but I put in just be more intuitive */
/* If you want to display, just give no class name to the image */
  .showImg {
  }
  </style>

  <script LANGUAGE="JavaScript">
  function showHideTable() {
    if (document.getElementById.("showHide").className.match(/hideimg/i)) {
      document.getElementById("TableRow").className = "";
      document.getElementById("showHide").src = "Show Table.bmp";
    } else {
      document.getElementById("TableRow").className = "hideImg";
      document.getElementById("showHide").src = "Hide Table.bmp";
    }
  }
  </script>
</head>

<body>
  <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()">
  <table border=1 cellpadding=4 CELLSPACING=0>
  <tr>
    <th>ROW 2 - HEADER</th>
  </tr>
  <tbody id="TableRow" style="display:none">
    <tr><td colspan="2">ROW 2 SubDATA...</td></tr>
    <tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
  </tbody>
  </table>

<!-- add this image for preload when you swap image later -->
<div class="hideImg">
<img src="Show Table.bmp">
<img src="Hide Table.bmp">
</div>
</body>
</html>

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

Thanks man, lol I've been bustin' my brains over this for a few hours now, just can't seem to get it... I just basically wanna have a button that shows and hides a table. for "hide table" it has an upArrow picture and for "show table" it has a downArrow picture basically...

Posting Whiz in Training

210 posts since Jul 2009

Reputation Points: 7

Solved Threads: 1

I'm thinking something along the lines of:

function changeVisibility() { 

}

function changePicture() {

}

Then just call them both the traditional:

OnClick="ChangeVisibility(); ChangePicture();"

What you think?

Posting Whiz in Training

210 posts since Jul 2009

Reputation Points: 7

Solved Threads: 1

You may break down the function into 2 functions if you want, but you need to deal with them properly.

The problem with visibility is what you are encountering in IE. IE has problem with changing style.visibility dynamically. Also, for style.display, it hide the display but the element is still in place! In other words, if you are displaying something in the middle of the page, and you use style.display="none", the element is hidden but there will be a blank in the middle of your page. The visibility is what should be used. Though, display is a fall back sometimes.

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

Hey guys,

I finally got it - if anyone else is looking for the source; I pasted it below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <title></title>
    </head>

    <body>
        <script language="javascript" type="text/javascript">
            function toggle(item) {
                obj = document.getElementById(item);
                buttonPicture = document.getElementById('showHide');
                visible = (obj.style.display != "none");
                if(visible){
                    obj.style.display = "none";
                    buttonPicture.src = "Show Table.bmp"
                } else {
                    obj.style.display = "block";
                    buttonPicture.src = "Hide Table.bmp"
                }
            }
        </script>
        <img id="showHide" src="Hide Table.bmp" onclick="toggle('TableRow')">

        <table border=1 cellpadding=4 CELLSPACING=0>
            <tr>
                <td>ROW 2 - HEADER</td>
            </tr>
            <tbody id="TableRow">
                <tr><td colspan="2">ROW 2 SubDATA...</td></tr>
                <tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
            </tbody>
        </table>

    </body>

</html>