Radio buttons for expansion/collapse

[Scamjunk]

I am a total JavaScript newbie and I got a JavaScript for maintenance
that collapses/expands rows whenever the (-)/(+) GIFs are clicked.
Could it be changed to do the same with radio buttons? on checking of a
radio button the respective row should expand, else remain collapsed.
and if another radio button is chosen then the row originally expanded
should collapse. Is this doable? If so, what should I be changing in
this code?

TIA,
Scam.

 

[RobG]

Scamjunk said on 03/05/2006 3:53 PM AEST:

I am a total JavaScript newbie and I got a JavaScript for maintenance
that collapses/expands rows whenever the (-)/(+) GIFs are clicked.
Could it be changed to do the same with radio buttons? on checking of a
radio button the respective row should expand, else remain collapsed.
and if another radio button is chosen then the row originally expanded
should collapse. Is this doable? If so, what should I be changing in
this code?

^^^^

Which code is that?

Yes, it's it should be straight forward. Associate each radio button
with a row, add an onclick handler that loops through the collection of
buttons to collapse the ones that aren't checked and expand the one that is.

How do you intend to expand and collapse rows? Using visibility:hidden
or display:none? Will you hide the entire row or just the content
(which should cause the row to 'collapse')?

Test thoroughly, there may be timing issues where the onclick fires
before or after the checked property is set or changed in some browsers
(I don't know, I haven't tested it).

If you have trouble with getting it to work (and you have something to
post), ask for help.

 

[Evertjan.]

Scamjunk wrote on 03 mei 2006 in comp.lang.javascript:

I am a total JavaScript newbie and I got a JavaScript for maintenance
that collapses/expands rows whenever the (-)/(+) GIFs are clicked.
Could it be changed to do the same with radio buttons?

Impossible to say, sinse you do not show the code you are referring to.

Try this:

<script type='text/javascript'>

function fu(x,y){
var z=x.parentNode.parentNode.childNodes
for (i=2;i<z.length;i++)
z.style.display=(y)?'none':''
}

</script>


<div>
<div>Header</div>
<div>
<input type=radio
name=excol1 onclick=fu(this,false) checked> Expand |
<input type=radio
name=excol1 onclick=fu(this,true)> Collaps
</div>
<div>txt1</div>
<div>txt2</div>
<div>txt3</div>
<div>txt4</div>
</div>