Darkmatter5 Posted February 26, 2009 Share Posted February 26, 2009 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? Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted February 26, 2009 Share Posted February 26, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.