Help with changing images and hiding divs with a script

[Darkmatter5]

Here's my code

<script type="text/javascript">
function togdiv(c_img,thediv) {
    if(document[c_img].src.indexOf("images/minus.gif")!= -1) {
        document[c_img].src="images/plus.gif";
        document.getElementById(thediv).style.display="none";
    }
    else {
        document[c_img].src="images/minus.gif";
        document.getElementById(thediv).style.display="block";
    }
}
</script>

 

<form method="post">
        <a href="javascript:togdiv('img','sections');"><img name="img" src="images/plus.gif" border="0" width="11" height="11" style="float: left;"></a><span class="medium_text">Edit buildings and units:</span><br>
        <a href="javascript:togdiv('img','world_plot_gen');"><img name="img" src="images/plus.gif" border="0" width="11" height="11" style="float: left;"></a><span class="medium_text">World Plot Generator:</span><br>
        <div id="sections" style="border-bottom: 1px solid gray; display: none;">test1</div>
        <div id="world_plot_gen" style="display: none;">
          <label for="xcoord">X coordinate: </label><input type="text" name="xcoord" maxlength="4" size="4"><br>
          <label for="ycoord">Y coordinate: </label><input type="text" name="ycoord" maxlength="4" size="4"><br>
          <input name="generate" type="submit" value="Generate"/><p>
        </div>
      </form>

 

The plus images don't change and the divs don't hide.  Why not?

[KevinM1]

Part of the problem is that you have two images with the same name.

 

Here's how I'd do it:

<script type="text/javascript">
   window.onload = function()
   {
      var images = document.images;
      var toggles = new Array();

      for(var i = 0; i < images.length; i++)
      {
         if(images[i].className == 'toggle')
         {
            toggles.push(images[i]);
         }
      }

      for(var j = 0; j < toggles.length; j++)
      {
         toggles[j].onclick = function()
         {
            var oDiv = document.getElementById('div' + j);

            if(this.src.indexOf('images/minus.gif') != -1)
            {
               this.src = 'images/plus.gif';
               oDiv.style.display = 'none';
            }
            else
            {
               this.src = 'images/minus.gif';
               oDiv.style.display = 'block';
            }
         }
      }
   }
</script>

<!-- in your HTML -->

<form method="post">
   <img class="toggle" src="images/plus.gif" />Expand div 1
   <br />
   <img class="toggle" src="images/plus.gif" />Expand div 2
   <br /><br />

   <div id="div1" style="display: none;">Sections</div>
   <div id="div2" style="display: none;">Coords</div>
</form>

 

There are pros and cons doing it this way.

 

Pros:

-Your markup is free of JavaScript

 

-It's dynamic -- you don't need to manually write the function call for each image, and if you're creating your markup from a server-side script, so long as you have an image with a class of 'toggle' and a corresponding <div>, it'll work.

 

Cons:

-Initial overhead.  If you only have a couple of <div> elements that need to be toggled, then this solution is overkill

 

-Loss of semantic meaning with the <div> elements themselves.  Since each id is now simply 'div#', applying CSS is more difficult.*

 

*There is a workaround.  If you give all the divs you want to toggle a class name, then you can keep their more meaningful id's.

 

Keep in mind, I haven't tested this, but it should work.