Showing/hiding divs

pmcdaniel · Sep 7, 2007

I've got some radio buttons.... when I click one a list of check boxes display showing which are related to that radio button. When another radio button is clicked another list of check boxes is displayed and the other list disapears.

I've got a loop but it's pretty ugly code(I'm not a guru at Javascript) and it doesn't work and I don't like the way it looks anyway.

Can someone please help? Everything is located inside a form but I'm pretty sure I'll need the onlick event with the jscript code up in the header area.......

BillyRayPreachersSon · Sep 7, 2007

And your code is?...

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

pmcdaniel · Sep 7, 2007

Okay, you asked for it....

Code:

var state = 'hidden';
var previousCarrier = 'Firstdisplay';

function showhide(layer_ref)
{

if (previousCarrier != 'Firstdisplay')
	{
    eval( "document.all." + previousCarrier + ".style.visibility = 'hidden'");
  }

alert (document.getElementById.layer_ref.style);

	if (state == 'visible')
	{
		state = 'hidden';

	}

	if (state == 'hidden')
	{
		state = 'visible';
	}

eval( "document.all." + layer_ref + ".style.visibility = 'visible'");

previousCarrier = layer_ref;
}

From the onlcick I'm passing the name of the radio button pushed.

BabyJeffy · Sep 7, 2007

Have a look at this example and see if it addresses your problem:

Code:

<html>
<head>
<title>Example</title>

<style type="text/css">
  .checkboxDiv { display: none; }
</style>

<script type="text/javascript">
window.onload = initForm;

/*
   attach all the javascript onclick events to the inputs
   that have a class that contains 'radio'
*/
function initForm()
{
  var l_pInputs = document.getElementsByTagName('INPUT');
  for (var loop=0, max=l_pInputs.length; loop<max; loop++)
  {
    if (l_pInputs[loop].className.indexOf('radio') > -1)
    {
      l_pInputs[loop].onclick = showCheckbox;
    }
  }
}

/*
   hide all the divs with a class that contains 'checkboxDiv'
*/
function hideCheckboxes()
{
  var l_pDivs = document.getElementsByTagName('DIV');
  for (var loop=0, max=l_pDivs.length; loop<max; loop++)
  {
    if (l_pDivs[loop].className.indexOf('checkboxDiv') > -1)
    {
      l_pDivs[loop].style.display = 'none';
    }
  }
}

/*
   hide all the divs via hideCheckboxes() and then show the
   div associated with the radio button that was clicked
*/
function showCheckbox()
{
  hideCheckboxes();
  var l_sDivToShowId = this.id.replace('carrier','chkboxes');
  document.getElementById(l_sDivToShowId).style.display = 'block';
}
</script>
</head>

<body>

<form action="">
  <fieldset>
    <div>
      <input type="radio" name="carrier" value="land" id="carrier_land" class="radio">
      <label for="carrier_land">Land</label>
      <div id="chkboxes_land" class="checkboxDiv">
        <strong>LAND CHECKBOXES</strong>
      </div>
    </div>
    <div>
      <input type="radio" name="carrier" value="surface" id="carrier_surface" class="radio">
      <label for="carrier_surface">Surface</label>
      <div id="chkboxes_surface" class="checkboxDiv">
        <strong>SURFACE CHECKBOXES</strong>
      </div>
    </div>
    <div>
      <input type="radio" name="carrier" value="sea" id="carrier_sea" class="radio">
      <label for="carrier_sea">Sea</label>
      <div id="chkboxes_sea" class="checkboxDiv">
        <strong>SEA CHECKBOXES</strong>
      </div>
    </div>
  </fieldset>
</form>
</body>
</html>

I've tried to comment all the things that are important.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Showing/hiding divs

pmcdaniel

Programmer

BillyRayPreachersSon

Programmer

pmcdaniel

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor