[SOLVED] Collapsing a div with a radio button

Darkmatter5 · 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?

Psycho · 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>

Darkmatter5 · 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>

KevinM1 · 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.

Psycho · 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>

Darkmatter5 · February 18, 2009

Perfect, Thanks!

Sign In

[SOLVED] Collapsing a div with a radio button

Recommended Posts

Darkmatter5

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information