Jump to content

Help with changing images and hiding divs with a script


Darkmatter5

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.