3 replies to this topic

[Jynxis]

I made a toggle menu. And i thought i'd use an image as the way to "toggle" the menu open or closed.

Now i can do that.

But...It will only change the image to the "exp_minus.gif"... And not back to "exp_plus.gif"

Im still really new to Javascript.

this is the WHOLE page.

<script type="text/javascript">

function toggleMenu(list){
	var listElementStyle = document.getElementById(list).style;
	var ToggleImage = list+"_IMG";
	var imageURL = "images/exp_plus.gif";
	var listElementImage = document.images[ToggleImage];

		listElementStyle.display = (listElementStyle.display == "none" ? "block" : "none");
		imageURL = (listElementImage.src == "images/exp_minus.gif" ? "images/exp_plus.gif" : "images/exp_minus.gif");
		
		 listElementImage.src = imageURL;

}
</script>
<div id="image_name_onclick"></div>
<table width="110%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
	<td bgcolor="#003399" class="content_header">
		<div  class="content_title">
		&nbsp;&nbsp;&nbsp;<IMG NAME="Site_Management_IMG" SRC="exp_plus.gif" onclick="toggleMenu('Site_Management');" width="10" height="10"/>
		<span id="Other">Site Management</span>
		</div>
	</td>
  </tr>
  <TBODY id="Site_Management" style="display:none;">
  <tr>
	<td bgcolor="#003399" class="content_row1"><a href="portal_config.php" target="mainFrame" id="Other">Portal Configuration</a></td>
  </tr>
	<tr>
	<td bgcolor="#003399" class="content_row2"><a href="registration_tos.php" target="mainFrame"  id="Other">Registeration TOS</a></td>
  </tr>
	<tr>
	<td bgcolor="#003399" class="content_row1"><a href="faq_update.php" target="mainFrame"  id="Other">F.A.Q Update</a></td>
  </tr>
  <tr>
	<td bgcolor="#003399" class="content_footer">&nbsp;</td>
  </tr>
  </TBODY>
</table>
<br />
<table width="110%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
	<td bgcolor="#003399" class="content_header">
		<div  class="content_title">
		&nbsp;&nbsp;&nbsp;<img src="images/exp_plus.gif" width="10" onclick="toggleMenu('Forum_Management');" height="10" name="Forum_Management_IMG"/>
	<span id="Other">Forum Management</span></div>
	</td>
  </tr>
  <TBODY id="Forum_Management" style="display:none;">
  <tr>
	<td bgcolor="#003399" class="content_row1"><a id="Other" href="forum_cat_management.php" target="mainFrame">Forum/Cat Management</a></td>
  </tr>
  <tr>
	<td bgcolor="#003399" class="content_footer">&nbsp;</td>
  </tr>
  </TBODY>
</table>

Edited by PlaGuEX, 16 July 2006 - 01:12 AM.

[rc69]

This is probably my favorite reason for taking on some of the projects i do the way i do
I've already had a similar problem

<script type="text/javascript">
function toggleMenu(list, img){
	var listElement = document.getElementById(list);

	listElement.style.display = (listElement.style.display == "none") ? "block" : "none";
	img.src = (img.src == "images/exp_minus.gif") ? "images/exp_plus.gif" : "images/exp_minus.gif";
}
</script>

<div id="image_name_onclick"></div>
<table width="110%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
	<td bgcolor="#003399" class="content_header">
		<div  class="content_title">
		   <IMG NAME="Site_Management_IMG" SRC="exp_plus.gif" onclick="toggleMenu('Site_Management', this);" width="10" height="10"/>
		<span id="Other">Site Management</span>
		</div>
	</td>
  </tr>
  <TBODY id="Site_Management" style="display:none;">
  <tr>
	<td bgcolor="#003399" class="content_row1"><a href="portal_config.php" target="mainFrame" id="Other">Portal Configuration</a></td>
  </tr>
	<tr>
	<td bgcolor="#003399" class="content_row2"><a href="registration_tos.php" target="mainFrame"  id="Other">Registeration TOS</a></td>
  </tr>
	<tr>
	<td bgcolor="#003399" class="content_row1"><a href="faq_update.php" target="mainFrame"  id="Other">F.A.Q Update</a></td>
  </tr>
  <tr>
	<td bgcolor="#003399" class="content_footer"> </td>
  </tr>
  </TBODY>
</table>
<br />
<table width="110%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
	<td bgcolor="#003399" class="content_header">
		<div  class="content_title">
		   <img src="images/exp_plus.gif" width="10" onclick="toggleMenu('Forum_Management', this);" height="10" name="Forum_Management_IMG"/>
	<span id="Other">Forum Management</span></div>
	</td>
  </tr>
  <TBODY id="Forum_Management" style="display:none;">
  <tr>
	<td bgcolor="#003399" class="content_row1"><a id="Other" href="forum_cat_management.php" target="mainFrame">Forum/Cat Management</a></td>
  </tr>
  <tr>
	<td bgcolor="#003399" class="content_footer"> </td>
  </tr>
  </TBODY>
</table>

Don't know if the changes will honestly help, but i made it a little more logical, and simplified it a little, changed listElementStyle so it will work in IE, and changed the way the image was selected (don't know why, just seems like your way might not work in all browsers, don't quote me though).

Also, might i ask why you have to different plus images?

SRC="exp_plus.gif"		// Site
src="images/exp_plus.gif" // Forum

Edited by rc69, 16 July 2006 - 02:34 AM.

[Jynxis]

Lol... i forgot to change it... had the images in two locations..

I test this all in IE atm .. cuz FF want to be geih
Nope... still didnt work. only changes to the minus image still.
[Edit]
I changed one of the 'toggle' images to have "exp_minus" instead of the "exp_plus" image.. It wouldnt change.Wierd..

Thanks for the help btw.

Edited by PlaGuEX, 16 July 2006 - 03:08 AM.

[rc69]

Well, if it still won't work, then we debug.

function toggleMenu(list, img){
window.alert('step 1');
	var listElement = document.getElementById(list);
window.alert('step 2');
	listElement.style.display = (listElement.style.display == "none") ? "block" : "none";
window.alert('src before: '+img.src);
	img.src = (img.src == "images/exp_minus.gif") ? "images/exp_plus.gif" : "images/exp_minus.gif";
window.alert('src after: '+img.src);
}

Simply find out which alert it gets to, then we can narrow down the problem. Keep in mind with the src before/after alerts, every character counts, so write down EXACTLY what comes up with each (if the script makes it that far).