0

Hi,

I'm trying to write a script where I can click an image to hide a table, then hide the table and change the image. Then if I click the image again, it should show the table and change the image to the initial image. Below is the code I have so far:

<!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() {
                if (document.getElementById.("showHide").src == "Hide Table.bmp") {
                    document.getElementById("TableRow").style.display = '';
                    document.getElementById("showHide").src = "Show Table.bmp";
              } else {
                  document.getElementById("TableRow").style.display = 'none';
                  document.getElementById("showHide").src = "Hide Table.bmp";
                }
            }
        </script>
        <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()">

        <table 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>

Thanks,
Ashton.

3
Contributors
10
Replies
11
Views
6 Years
Discussion Span
Last Post by AshtonHogan
0

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)) {
}
0
<!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.

0

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>
0

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.

0

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.

0

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>

Edited by Taywin: n/a

0

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...

0

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?

0

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.

Edited by Taywin: n/a

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.