onClick="Swap Image + Show hidden layer"

[josel]

I am working on a very nice data grid table. I am writing this dynamically using PHP. So far I have managed to get the table just the way I want it and added some very nice effect.

I am hiding a layer under the row. The left most column has an image (a plus sign); when clicked, three things happen:
1) Runs a loop to hide any opened layer
2) Swaps Image from plus (+) sign to minus (-) sign
3) Displays hidden layer

Everything looks good up until now. The problem I am having is hiding the layer if the minus (-) sign image is clicked. Since I simply swapped the images, the onClick behavior still the same no matter which image I place and so, the above three steps are repeated.

The problems I am having are
1) Once I swap plus (+) sign with minus (-) sign, I need the onClick to change to
(a) Swap image back to plus sign
(b) Hide layer

2) Every time I open a layer, I get kicked up to the top of the page. I want the page to simply collapse

Here are my JavaScript snip

	function ExpandSwap(i) {
	  var div = "custDetail" + i;
	  var td  = "expand" + i;
	  var img = "img" + i;
//	  alert("Values are \n div: " + div + "\n td: " + td + "\n img: " + img);
	  document.eval(img).src="images/delete.png";
	  document.getElementById('custDetail'+i).style.display='block';
	}

	function hideall(i){
		var X = i + 1;
		for (count=1; count<X; count+=1) // set "count" to one more than the total images/links
		{ document.getElementById('image'+count).src='images/add.png';
		  document.getElementById('custDetail'+count).style.display='none'; 
		}
	}

and the html code

<td id="expand1">
<a class="white" href="#" onClick="hideall(328); ExpandSwap(1)"><img src="images/add.png" border="0" width="15" height="15" id="image1" name="img1"></a>
</td>

Any and all suggestions will be greatly appreciated.

Regards,


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[josel]

OK, I solved one of problems. I changed <a> tag to

<a class="white" href="javascript: hideall(328); ExpandSwap(1)"><img src="images/add.png" border="0" width="15" height="15" id="image1" name="img1"></a>

and I am no longer kicked up to top of page.

Regards,

Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[josel]

I have managed to figure it out. Perhaps, not the most attractive solution but a functional one.

Here is the new code

function ExpandSwap(i,j) {
  var div = "custDetail" + i;
  var td  = "expand" + i;
  var img = "img" + i;
//alert("Values are \n div: " + div + "\n td: " + td + "\n img: " + img);
  document.eval(img).src="images/delete.png";
  document.getElementById('alink'+i).href = "javascript: hideone(" + i +"," + j + ")";

document.getElementById('custDetail'+i).style.display='block';
}

function hideone(i,j){
		  document.getElementById('image'+i).src='images/add.png';
document.getElementById('custDetail'+i).style.display='none'; 
document.getElementById('alink'+i).href = "javascript: hideall(" + j +"); ExpandSwap(" + i + "," + j + ")";
}

function hideall(i){
var X = i + 1;
for (count=1; count<X; count+=1) // set "count" to one more than the total images/links
{ document.getElementById('image'+count).src='images/add.png';	document.getElementById('custDetail'+count).style.display='none'; 
}
}

and the html portion of it

<td id="expand1"><a id="alink1" class="white" href="javascript: hideall(328); ExpandSwap(1,328)"><img src="images/add.png" border="0" width="15" height="15" id="image1" name="img1"></a></td>

This is very exiting ... It really feels good having figured this one on my own. I guess that the tips given are paying off.

Regards,


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours