asked on

Hide/show elements

Hello experts.
I have a table and i want clicking on elements to show or hide a div.
here is the code.
On page load schould the div extras and the img/minus be shown.When i click on the img/minus than it should
hide the div extras and the minus img and show the plus image.When i hit now the img/plus should the opposite function happen.
Any help?

<td colspan="2" class="ExtrasTD" ><img src="../../img/plus.gif"/><img src="../../img/minus.gif"/>  </td>
 </tr>
  <div id="extras">
 <tr><td colspan="2" class="ExtrasTD">ABS</td>
</div>

Open in new window

JohnSixkiller

Hi, panosms:

<script>
  showHide(objectId){
     var oTR = document.getElementById(objectId);
     var oIMG = document.getElementById(imgPlus);
     if(oTR.style.display == 'none'){
       oTR.style.display = 'block';
       oIMG.src = '../../img/minus.gif'
     } else {
       oTR.style.display = 'none';
       oIMG.src = '../../img/plus.gif'
     }
  }
</script>
 
<tr><td colspan="2" class="ExtrasTD" ><img onclick='showHide("trExtras")' id="imgPlus" src="../../img/minus.gif"/></td></tr>
<tr style="display:none" id='trExtras'><td colspan="2" class="ExtrasTD">ABS</td>

Open in new window

JohnSixkiller

On line 2: it should be function showHide(objectId){
4: var oIMG = document.getElementById('imgPlus');

Panos

ASKER

Panos

ASKER

Hello JohnSixkiller.
As you sad it is nice to work with you.
I have send you allready he code i wrote but it does not work.
As i have noticed you have the function hide/show for a tr tag.
Can it be for a div tag?nI the original page i have more than one rows in a div.

JohnSixkiller

Yes, it can be used for almost any object/tag. Just replace corresponding "ID" attribute.
In this case is better to use TBODY instead of div.

<script>
  function showHide(objectId){
     var oTR = document.getElementById(objectId);
     var oIMG = document.getElementById('imgPlus');
     if(oTR.style.display == 'none'){
       oTR.style.display = 'block';
       oIMG.src = '../../img/Arrowdown.gif'
     } else {
       oTR.style.display = 'none';
       oIMG.src = '../../img/Arrowup.gif'
     }
  }
</script>
<tr><td colspan="2" class="ExtrasTD" ><img onclick='showHide("trExtras")' id="imgPlus"  src="../../img/Arrowdown.gif"/> </td>
<tr style="display:none" id='trExtras'><td colspan="2" class="ExtrasTD">Test</td></tr>

Open in new window

Panos

ASKER

It is working.
Can you give an example with TBody?

JohnSixkiller

I have change the code, so it can be easily modified after adding more "image-extras" pairs.
As function parameter I am passing "this" which points to the actual IMG. And actual IMG.value holds index of corresponing TBODY.

Hope it helps.

John

<script>
  function showHide(Sender){
     var oTBody = document.getElementById("tbody"+Sender.value);
     if(oTBody.style.display == 'none'){
       oTBody.style.display = 'block';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
<tr><td colspan="2" class="ExtrasTD" ><img onclick='showHide(this)' id="imgPlus1" value="1"  src="../../img/Arrowdown.gif"/> </td>
 
<tbody id='tbody1' style='display:none'>
<tr><td colspan="2" class="ExtrasTD">Test</td></tr>
</tbody>

Open in new window

Panos

ASKER

hello JohnSixkiller.
Please take a look at my code.
I don't know why it is not working

<script>
  function showHide(Sender){
     var oTBody = document.getElementById("tbody"+Sender.value);
     if(oTBody.style.display == 'none'){
       oTBody.style.display = 'block';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
<tr>
   <td colspan="2" class="ExtrasTD" ><tr><td colspan="2" class="ExtrasTD" ><img onclick='showHide(this)' id="imgPlus1" value="1"   src="../../img/Arrowdown.gif"/></td>
 </tr>
<tbody id='tbody1' style='display:none'>
<tr><td colspan="2" class="ExtrasTD">Test</td></tr></tbody>

Open in new window

JohnSixkiller

If something specific does not work, post your full code. Here is full working sample:

<html>
<head>
<script>
  function showHide(Sender){
     var oTBody = document.getElementById("tbody"+Sender.value);
     if(oTBody.style.display == 'none'){
       oTBody.style.display = 'block';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
 
</head>
 
<body>
 
<table>
<tr>
   <td colspan="2" class="ExtrasTD" ><tr><td colspan="2" class="ExtrasTD" ><img onclick='showHide(this)' id="imgPlus1" value="1"   src="../../img/Arrowdown.gif"/></td>
 </tr>
<tbody id='tbody1' style='display:none'>
<tr><td colspan="2" class="ExtrasTD">Test</td></tr></tbody>
</table>
</body>
</html>

Open in new window

Panos

ASKER

Hello Johnsixkiller.
I noticed that this new code is working in explorer and not in firefox.
Can you check it?

JohnSixkiller

Hi again. Well Firefox does not like VALUE attribute in IMG tag. So to get index of particular TBODY use index of Sender (IMG, 1)

var oTBody = document.getElementById("tbody"+Sender.id.substring(7));

Panos

ASKER

hello JohnSixkiller.
The code is now working but in firefox i notice a misfunction.
As you see in my code i have a <td colspan="2".....
It seems that only the <first> td is shown.
In explorer it is working normal.

JohnSixkiller

I have tried the code in IE7 and FF3. I dont see the difference. However there is invalid markup in code.
Row structure should be:
<tr><td>x</td><td>y</td></tr>
<tr><td colspan=2>z</td></tr>

<html>
<head>
<script>
  function showHide(Sender){
     var oTBody = document.getElementById("tbody"+Sender.id.substring(7));
     if(oTBody.style.display == 'none'){
       oTBody.style.display = 'block';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
 
</head>
 
<body>
 
<table>
<tr>
   <td colspan="2" class="ExtrasTD" ><img onclick='showHide(this)' id="imgPlus1" value="1"   src="../../img/Arrowdown.gif"/></td>
 </tr>
<tbody id='tbody1' style='display:none'>
<tr><td colspan="2" class="ExtrasTD">Test</td></tr></tbody>
</table>
</body>
</html>

Open in new window

Panos

ASKER

The invalid markup up was a mistace during copy and paste.
look at the code below please

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
<!--
 
.ExtrasTD {
	color: #FFFFFF;
	background-color: #424242;
	height: 18px;
}
.tablePark {
	width: 240px;
}
-->
</style>
 
 
<script>
  function showHide(Sender){
     var oTBody = document.getElementById("tbody"+Sender.id.substring(7));
     if(oTBody.style.display == 'none'){
       oTBody.style.display = 'block';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
</head>
<body>
<div> 
 <table cellpadding="0"cellspacing="0"  class="tablePark">
  <tr>
    <td>Test:</td>
    <td>test</td>
  </tr>
 <tr>
 <td colspan="2"  >
 <img onclick='showHide(this)' id="imgPlus1" value="1"  src="../../img/Arrowdown.gif"/></td>
 </tr>
<tbody  id='tbody1' style='display:none'>
<tr><td class="ExtrasTD"colspan="2" >Test</td></tr></tbody>
</table>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

JohnSixkiller

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

Look at my screen.
test.gif

Panos

ASKER

Hello JohnSixkiller.
I don't want to make it too difficult for you.May be the problem is in my FF3(greek version)
I will accept your answer.It is working fine in Explorer.
But i still will search for something else or make the question again to find another way.
Thank you again
Panos

JohnSixkiller

I have not noticed it before. Its some "FF" feature (maybe CSS3 or XHTML).
Change line 26 to : oTBody.style.display = ''; It will work.

Good Luck and Thanks for the points and grade.

Panos

ASKER

It is working for me too now.
Thanks.