Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2027
  • Last Modified:

javascript toggle

I have a javascript toggle function below, and I am trying to figure out how I can replace the images with plus and minus images based on the expanding and collapsing of the menu's. See code below:

function Toggle(item) {
 

   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   
   
   if (visible) {
     obj.style.display="none";

     
   } else {
      obj.style.display="block";
   
     
   }


}


            <!-- 1st Left Nav Bar -->
                      <table cellspacing="0" cellpadding="1" border="0">
                          <tr>
                                <td  valign="right" width="239" background="images/leftnavButton1a.gif" height="34">&nbsp;<a id="A2" href="javascript:Toggle('support');"><img src="images/plus.gif" height="16" border="0"  align="middle"/></a><A id="A3" href="javascript:Toggle('support');">
                                       </a></td>
                                  </tr>
                            </table>
                                       
                            <div id="support" style="display: none; MARGIN-LEFT: 1em">
                           
                                   <a href="javascript:ajaxpage('test3.htm', 'map');">test1</a>
                            </div>
                           
                        <!-- 2nd Left Nav Bar -->
                      <table cellspacing="0" cellpadding="1" border="0">
                          <tr>
                                <td  valign="right" width="239" background="images/leftnavButton2a.gif" height="34">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                      <a id="xsupport" href="javascript:Toggle('support2');">
                                        <img src="images/plus.gif" height="16" border="0" /></a><A id="A1" href="javascript:Toggle('support');">
                                       </a></td>
                                  </tr>
                            </table>

               
                            <div id="support2" style="display: none; MARGIN-LEFT: 1em">
                                  <table cellspacing="0" cellpadding="1" border="0">
                                        <tr>
                                              <td align="left">
                                    <a href="javascript:ajaxpage('test2.htm', 'map');">test</a>
                                               </td>
                                        </tr>
                                  </table>
                            </div>
0
LeeHenry
Asked:
LeeHenry
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
If you make your plus image like this:
                            <td  valign="right" width="239" background="images/leftnavButton1a.gif" height="34">&nbsp;<img src="images/plus.gif" height="16" border="0"  align="middle" onClick="Toggle(this,'support');" />

Then you can use this Toggle() version:
function Toggle(theImg, divID) {
   theDiv=document.getElementById(divID);
   if(theImg.src.indexOf("plus")>0){
     theDiv.style.display="block";
     theImg.src=theImg.src.replace("plus","minus");
   } else {
     theDiv.style.display="none";
     theImg.src=theImg.src.replace("minus","plus");
   }
}


0
 
ZvonkoSystems architectCommented:
And if you realy need links like this:

                            <td  valign="right" width="239" background="images/leftnavButton1a.gif" height="34">&nbsp;<a href="::Support" onClick="Toggle(this,'support');return false"><img src="images/plus.gif" height="16" border="0"  align="middle" />Support</a></td>


Then use this method:

function Toggle(theLink, divID) {
   theDiv=document.getElementById(divID);
   theImg=theLink.getElementsByTagName("img")[0];
   if(theImg.src.indexOf("plus")>0){
     theDiv.style.display="block";
     theImg.src=theImg.src.replace("plus","minus");
   } else {
     theDiv.style.display="none";
     theImg.src=theImg.src.replace("minus","plus");
   }
}

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now