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> Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/ 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? Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/#findComment-977160 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' Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/#findComment-977161 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. Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/#findComment-977190 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. Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/#findComment-977197 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> Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/#findComment-977226 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. Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/#findComment-977244 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) Link to comment https://forums.phpfreaks.com/topic/185114-hideshow-div/#findComment-977471 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.