toggle between 2 images and 2 divs

[Diggum1]

I have the following javascript that I need to modify so when I click on the completeform.gif, <div id="one"> displays, and when I click on showdetails.gif, <div id="two"> displays. They should just toggle between the two. Been working on it for awhile but I can't seem to figure it out...

Anyone have any ideas?
Thanks
Rick


<script language="javascript">
imageX='plus';
function toggleDisplay(e){
element = document.getElementById(e).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageX=='plus') {document.getElementById('imagePM').src='images/showdetails.gif';imageX='minus';}
else {document.getElementById('imagePM').src='images/completeform.gif';imageX='plus';}
}
</script>

<a title="Show Tables" href="javascript:toggleDisplay('two')"><img border="0" src="images/completeform.gif" id=imagePM></a>

<div id=two>
<table>
<tr>
<td>content
</td>
</tr>
</table>
</div>

<div style="display:none;" id=one>
<table>
<tr>
<td>content</td>
</tr>
</table>
</div>

 

[theniteowl]

Get the object first then test it's style, do not try going directly for the objects style.

<script language="javascript">
imageX='plus';
function toggleDisplay(e){
element = document.getElementById(e)[red][s].style[/s][/red];
 if (element.[red]style.[/red]display=='none') {element.[red]style.[/red]display='block';}
 else {element.[red]style.[/red]display='none';}
 if (imageX=='plus') {document.getElementById('imagePM').src='images/showdetails.gif';imageX='minus';}
 else {document.getElementById('imagePM').src='images/completeform.gif';imageX='plus';}
}
</script>

At my age I still learn something new every day, but I forget two others.

 

[monksnake]

I can show you a quick toggle for these two anchors:
Like theniteowl said grab the object first then test for it's style.

<script type="text/javascript">
   function toggleDisplay(){
      var divObj1 = document.getElementById("one");
      var divObj2 = document.getElementById("two");
      var anchorObj = document.getElementById("imagePM");
      var shownDivId = new String()
      if (divObj1.style.display == 'none') {
         divObj1.display='block';
         divObj2.display='none';
         shownDivId = "one";
      }
      else {
         divObj1.display='none';
         divObj2.display='block';
         shownDivId = "two";
      }
      if (shownDivId == "one") {
         anchorObj.src = "images/showdetails.gif";
      }
      else {
         anchorObj.src = "images/completeform.gif";
      }
   }
</script>

Your anchor tag should look like this:

<a title="Show Tables" href="javascript:toggleDisplay()"><img border="0" src="images/completeform.gif" id="imagePM"></a>

<.

 

[Diggum1]

perfect, thanks guys!

 

[monksnake]

No problem, let me optimize that function for you too

<script type="text/javascript">
   function toggleDisplay(){
      var divObj1 = document.getElementById("one");
      var divObj2 = document.getElementById("two");
      var anchorObj = document.getElementById("imagePM");
      if (divObj1.style.display == 'none') {
         divObj1.display='block';
         divObj2.display='none';
         anchorObj.src = "images/showdetails.gif";
      }
      else {
         divObj1.display='none';
         divObj2.display='block';
         anchorObj.src = "images/completeform.gif";
      }
   }
</script>

There

<.