help plz in finding a script

Hi,

I am looking for a script where, when you click a checkbox, a series of options appears just below so that you can check a sub category of the main items.

eg. check box for wines.

when clickin the checkbox, it gives you a listr of red, white, sparkling, champagnes each, with its own checkbox.

I looked through dynamic druive but didn't see anything close


Any help most welcome.

bazz

<form name="expandible">
<input type="checkbox" name="uniquename" onLoad="this.checked=false;" onClick="toggle(this.name)";>List of Wines
<div id="uniquename" style="visibility:hidden;">
- <input type="checkbox"> Red
- <input type="checkbox"> White
- <input type="checkbox"> Sparkling
- <input type="checkbox"> Champagnes
</div>
</form>
<script>
function toggle(name)
{
toggleBox=document.getElementById(name);
if(toggleBox.style.visibility=='hidden')
{
toggleBox.style.visibility="visible";
}
else
{
toggleBox.style.visibility="hidden";
}
}
</script> Every time toggle() is called, it shows a div with the same id as the name of the checkbox. You can build upon this and even use it with completely different HTML elements. Hope it helps!

Crikey, I wasn't expecting that degree of help.

that looks promising and I shall test it tomorrow.

Thank you binaryWeapon :thumbsup:

bazz

Thank you binaryWeapon.

I am delighted with that script and I find the functioning of it to be very good. However, I have one slight difficulty.
not seeming to work in ie6.

Having fiddled about to make the expanding div push the lower content downwards, I can't seem to make the lowering fit the actual content. I mean some need to be pushed down 100px and others 200px. Is there a way to make it 'variable' to fit the height required?

here is the code currently I would appreciate any help.


<form name="expandible">

<input type="checkbox" name="pillows" onLoad="this.checked=false;" onClick="toggle(this.name)";>Pillows
<div id="pillows" style="visibility:hidden;height:10px;">
<table>
<tr>
<td colspan='2'>Guest 1:</td>
</tr>
<tr>
<td>
<input type="radio" name="first_pillow"> Goose Down Pillow </td><td> <input type="radio" name="second_pillow"> Goose Down Pillow
</td>

</tr>
<tr>
<td>
<input type="radio" name="first_pillow"> Hollow Fibre Pillow </td><td> <input type="radio" name="second_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>

<tr>
<td>
<input type="radio" name="first_pillow"> Non-Allergenic Pillow </td><td> <input type="radio" name="second_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>
<tr>
<td colspan='2'>Guest 2:</td>

</tr>
<tr>
<td>
<input type="radio" name="third_pillow"> Goose Down Pillow </td><td> <input type="radio" name="fourth_pillow"> Goose Down Pillow
</td>
</tr>
<tr>

<td>
<input type="radio" name="third_pillow"> Hollow Fibre Pillow </td><td> <input type="radio" name="fourth_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>
<tr>
<td>

<input type="radio" name="third_pillow"> Non-Allergenic Pillow </td><td> <input type="radio" name="fourth_pillow"> Hollow Fibre Pillow <br />
</td>
</tr>
</table>
</div>
</form>
<script>
function toggle(name)
{
toggleBox=document.getElementById(name);
if(toggleBox.style.visibility=='hidden')
{
toggleBox.style.visibility="visible";
toggleBox.style.height="200px";
}
else
{
toggleBox.style.visibility="hidden";
toggleBox.style.height="10px";
}
}
</script>






bazz

IE considers name and id as synonymous ;)

Your input name and id is the same, which confuses IE. For a fix, Change your code to:

<input type="checkbox" name="pillow" onLoad="this.checked=false;" onClick="toggle()";>


...Then, change your script to:

toggleBox=document.getElementById('pillows');


See if it helps :)

Thanks, I didn't know that about ie.

I shall play about with it but I do know that I need to retain the js code as below so that more than one div can be presented if needed. ie, not just the one with the set name of 'pillows'.


toggleBox=document.getElementById(name);

not

toggleBox=document.getElementById('pillows');


bazz