squiblo Posted December 14, 2009 Share Posted December 14, 2009 This is what i have so far and it is nearly perfect. The only problem is that when i click the second link the displayText of the first link changes instead of the second one. <script type="text/javascript"> function toggle_view(id) { var div = document.getElementById(id); var text = document.getElementById("displayText"); if(div.style.display == 'block' ) { div.style.display = 'none'; text.innerHTML = "Change"; } else { div.style.display = 'block'; text.innerHTML = "hide"; } } </script> <a id='displayText' href='#' onclick="toggle_view('something')">Change</a><br> <div id='something' style="display:none;">Content of div something</div> <a id='displayText' href='#' onclick="toggle_view('another')">Change</a><br> <div id='another' style="display:none;">Content of div another</div> Quote Link to comment Share on other sites More sharing options...
optikalefx Posted December 14, 2009 Share Posted December 14, 2009 there are 2 links? where? There are 2 texts? where? Quote Link to comment Share on other sites More sharing options...
squiblo Posted December 14, 2009 Author Share Posted December 14, 2009 if you scroll down you will see one with an id='something' and one with id='another' Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted December 14, 2009 Share Posted December 14, 2009 Remember: an ID is supposed to be a unique value. Using the same ID on two elements is semantically incorrect. This is why your script only modifies the text of the first link - JavaScript only looks for one instance of that ID because there should only be one. Quote Link to comment Share on other sites More sharing options...
squiblo Posted December 14, 2009 Author Share Posted December 14, 2009 okay so if i change the id's to "displayText1" and "displayText2" how can i modify the javascript to suite this. Quote Link to comment Share on other sites More sharing options...
squiblo Posted December 14, 2009 Author Share Posted December 14, 2009 i have also tried using a while loop to change the id's like the following, but this still does not work (both of the texts do not change when either is clicked) please help. <script type="text/javascript"> function toggle_view(id) { var div = document.getElementById(id); var x=0; while (x < 10) { var text = document.getElementById(x); x++; } if(div.style.display == 'block' ) { div.style.display = 'none'; text.innerHTML = "Change"; } else { div.style.display = 'block'; text.innerHTML = "Hide"; } } </script> <a id='0' href='#' onclick="toggle_view('something')">Change</a><br> <div id='something' style="display:none;">Content of div something</div> <a id='1' href='#' onclick="toggle_view('another')">Change</a><br> <div id='another' style="display:none;">Content of div another</div> Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted December 14, 2009 Share Posted December 14, 2009 <!DOCTYPE html> <html> <head> <title>Blah</title> </head> <body> <div id="content0"></div><a id="link0"></a> <div id="content1"></div><a id="link1"></a> </body> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); var links = document.getElementsByTagName('a'); var expandable = new Array(); var toggles = new Array(); for(var i = 0; i < divs.length; ++i) { if (divs[i].id == 'content' + i) { expandable.push(divs[i]); } } for(var j = 0; j < links.length; ++j) { if (links[j] == 'link' + i) { toggles.push(links[j]); } } for(var k = 0; k < toggles.length; ++k) { toggles[k].onclick = function() { if (expandable[k].style.display == 'block') { expandable[k].style.display = 'none'; this.innerHTML = 'Show'; } else { expandable[k].style.display == 'block'; this.innerHTML = 'Hide'; } } </script> </html> Not tested, but something like that should work. Quote Link to comment Share on other sites More sharing options...
optikalefx Posted December 15, 2009 Share Posted December 15, 2009 I think youre doing too much work <a href="" div="link1" ="link1">first link</a> <div id="link1"></div> <a href="" div="link2">second link</a> </div> $(document).ready(function() { $("a").click(function() { var id = $(this).attr("div"); $("#"+id).toggle(); }); }); basically give the link a special attribute "div" which is the id of the div you want to toggle. Using jQuery toggle you hit the link and it hides and shoes. (untested) 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.