Darkmatter5 Posted February 18, 2009 Share Posted February 18, 2009 I have this javascript running. function togglesec(thediv) { var el=document.getElementById(thediv); if(el.style.display!='none') { el.style.display='none'; } else { el.style.display='block'; } } Then I have this html <input type="radio" name="togglesecs" onclick="togglesec('buildings');" />Buildings<br> <input type="radio" name="togglesecs" onclick="togglesec('units');" />Units <div id="buildings" style="display:none;">test1</div> <div id="units" style="display:none;">test2</div> Now how can I get it to only display one div, either buildings or units at a time? Link to comment https://forums.phpfreaks.com/topic/145785-solved-collapsing-a-div-with-a-radio-button/ Share on other sites More sharing options...
Psycho Posted February 18, 2009 Share Posted February 18, 2009 You will need to put the INPUT tags within FORM tags for this to work: <html> <head> <script type="text/javascript"> function togglesec(radioOption) { var radioGroup = radioOption.parentNode; for(var opt=0; opt<radioGroup.length; opt++) { var divObj = document.getElementById(radioGroup[opt].value); divObj.style.display = (radioGroup[opt].checked) ? 'block':'none'; } return; } </script> </head> <body> <form> <input type="radio" name="togglesecs" value="buildings" onclick="togglesec(this);" />Buildings<br> <input type="radio" name="togglesecs" value="units" onclick="togglesec(this);" />Units <div id="buildings" style="display:none;">test1</div> <div id="units" style="display:none;">test2</div> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/145785-solved-collapsing-a-div-with-a-radio-button/#findComment-765439 Share on other sites More sharing options...
Darkmatter5 Posted February 18, 2009 Author Share Posted February 18, 2009 It worked great, but I just had to throw a wrench in the code. I am going through a design process and came up with a new way to present the data on the screen, but it in turn breaks the javascript and won't work anymore. I suspect it has to do with the new div around the first set of radio buttons. I've noticed you have to clearly reference objects in javascript and I think the code can't find the radio buttons as they are now inside the div. How can I get this working? function togglesec(radioOption) { var radioGroup=radioOption.parentNode; for(var opt=0; opt<radioGroup.length; opt++) { var divObj=document.getElementById(radioGroup[opt].value); divObj.style.display=(radioGroup[opt].checked) ? 'block':'none'; } return; } <form> <div id="sections" style="float: left; width: 100px;"> <input type="radio" name="togglesecs" value="buildings" onclick="togglesec(this);" />Buildings<br> <input type="radio" name="togglesecs" value="units" onclick="togglesec(this);" />Units<br> <input type="radio" name="togglesecs" value="units1" onclick="togglesec(this);" />Units1<br> <input type="radio" name="togglesecs" value="units2" onclick="togglesec(this);" />Units2 </div> <div id="buildings" style="float: left; width: 150px; border-left: 1px gray dashed; display:none;"> <input type="radio" name="toggledivs" value="bldlvl1" onclick="togglesec(this);" />Level 1 buildings<br> <input type="radio" name="toggledivs" value="bldlvl2" onclick="togglesec(this);" />Level 2 buildings<br> <input type="radio" name="toggledivs" value="bldlvl3" onclick="togglesec(this);" />Level 3 buildings<br> <input type="radio" name="toggledivs" value="bldlvl4" onclick="togglesec(this);" />Level 4 buildings<br> <input type="radio" name="toggledivs" value="bldlvl5" onclick="togglesec(this);" />Level 5 buildings<br> <input type="radio" name="toggledivs" value="bldlvl6" onclick="togglesec(this);" />Level 6 buildings<br> <input type="radio" name="toggledivs" value="bldlvl7" onclick="togglesec(this);" />Level 7 buildings<br> <input type="radio" name="toggledivs" value="bldlvl8" onclick="togglesec(this);" />Level 8 buildings<br> <input type="radio" name="toggledivs" value="bldlvl9" onclick="togglesec(this);" />Level 9 buildings<br> <input type="radio" name="toggledivs" value="bldlvl10" onclick="togglesec(this);" />Level 10 buildings </div> </form> Link to comment https://forums.phpfreaks.com/topic/145785-solved-collapsing-a-div-with-a-radio-button/#findComment-765532 Share on other sites More sharing options...
KevinM1 Posted February 18, 2009 Share Posted February 18, 2009 Assuming that the only radio buttons on your page will be used to toggle divs, I've come up with the following: <html> <head> <title>Blah</title> <script type="text/javascript"> window.onload = function() { var inputs = document.getElementsByTagName('input'); var radios = new Array(); var divs = new Array(); for(var i = 0; i < inputs.length; i++) { if(inputs[i].type == "radio") { radios.push(inputs[i]); } } for(var j = 0; j < radios.length; j++) { radios[j].onclick = function() { divs[j] = document.getElementById(this.value); divs[j].style.display = (divs[j].style.display == 'none') ? 'block' : 'none'; } } } </script> </head> <body> <form> <div id="sections" style="float: left; width: 100px;"> <input type="radio" name="togglesecs" value="buildings" />Buildings<br> <input type="radio" name="togglesecs" value="units" />Units<br> <input type="radio" name="togglesecs" value="units1" />Units1<br> <input type="radio" name="togglesecs" value="units2" />Units2 </div> <div id="buildings" style="float: left; width: 150px; border-left: 1px gray dashed; display:none;"> <input type="radio" name="toggledivs" value="bldlvl1" />Level 1 buildings<br> <input type="radio" name="toggledivs" value="bldlvl2" />Level 2 buildings<br> <input type="radio" name="toggledivs" value="bldlvl3" />Level 3 buildings<br> <input type="radio" name="toggledivs" value="bldlvl4" />Level 4 buildings<br> <input type="radio" name="toggledivs" value="bldlvl5" />Level 5 buildings<br> <input type="radio" name="toggledivs" value="bldlvl6" />Level 6 buildings<br> <input type="radio" name="toggledivs" value="bldlvl7" />Level 7 buildings<br> <input type="radio" name="toggledivs" value="bldlvl8" />Level 8 buildings<br> <input type="radio" name="toggledivs" value="bldlvl9" />Level 9 buildings<br> <input type="radio" name="toggledivs" value="bldlvl10" />Level 10 buildings </div> <div id="units" style="float: left; width: 150px; border-left: 1px gray dashed; display: none;"> More stuff here </div> </form> </body> </html> It works in FF 3*. Haven't tried it in IE. Note that you don't need an inline function invocation in the markup. Simply create a radio button whose value is the id of the div it should toggle, and that div itself, and it'll work. *The first two radio buttons work. The others throw an error because their respective divs aren't actually written in the markup. Link to comment https://forums.phpfreaks.com/topic/145785-solved-collapsing-a-div-with-a-radio-button/#findComment-765561 Share on other sites More sharing options...
Psycho Posted February 18, 2009 Share Posted February 18, 2009 <html> <head> <script type="text/javascript"> function togglesec(radioOption) { var radioGroup = radioOption.parentNode.childNodes; for(var opt=0; opt<radioGroup.length; opt++) { if (radioGroup[opt].type=='radio') { var divObj = document.getElementById(radioGroup[opt].value); divObj.style.display = (radioGroup[opt].checked) ? 'block':'none'; } } return; } </script> </head> <body> <form> <div id="sections" style="float: left; width: 100px;"> <input type="radio" name="togglesecs" value="buildings" onclick="togglesec(this);" />Buildings<br> <input type="radio" name="togglesecs" value="units" onclick="togglesec(this);" />Units<br> <input type="radio" name="togglesecs" value="units1" onclick="togglesec(this);" />Units1<br> <input type="radio" name="togglesecs" value="units2" onclick="togglesec(this);" />Units2 </div> <div id="buildings" style="float: left; width: 150px; border-left: 1px gray dashed; display:none;"> <input type="radio" name="toggledivs" value="bldlvl1" onclick="togglesec(this);" />Level 1 buildings<br> <input type="radio" name="toggledivs" value="bldlvl2" onclick="togglesec(this);" />Level 2 buildings<br> <input type="radio" name="toggledivs" value="bldlvl3" onclick="togglesec(this);" />Level 3 buildings<br> <input type="radio" name="toggledivs" value="bldlvl4" onclick="togglesec(this);" />Level 4 buildings<br> <input type="radio" name="toggledivs" value="bldlvl5" onclick="togglesec(this);" />Level 5 buildings<br> <input type="radio" name="toggledivs" value="bldlvl6" onclick="togglesec(this);" />Level 6 buildings<br> <input type="radio" name="toggledivs" value="bldlvl7" onclick="togglesec(this);" />Level 7 buildings<br> <input type="radio" name="toggledivs" value="bldlvl8" onclick="togglesec(this);" />Level 8 buildings<br> <input type="radio" name="toggledivs" value="bldlvl9" onclick="togglesec(this);" />Level 9 buildings<br> <input type="radio" name="toggledivs" value="bldlvl10" onclick="togglesec(this);" />Level 10 buildings </div> <div id="units" style="float: left; width: 150px; border-left: 1px gray dashed; display:none;">Units</div> <div id="units1" style="float: left; width: 150px; border-left: 1px gray dashed; display:none;">Units1</div> <div id="units2" style="float: left; width: 150px; border-left: 1px gray dashed; display:none;">Units2</div> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/145785-solved-collapsing-a-div-with-a-radio-button/#findComment-765636 Share on other sites More sharing options...
Darkmatter5 Posted February 18, 2009 Author Share Posted February 18, 2009 Perfect, Thanks! Link to comment https://forums.phpfreaks.com/topic/145785-solved-collapsing-a-div-with-a-radio-button/#findComment-765639 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.