toggle div visiblity using prototype.js - html

Question

I'd this html code:
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />Saved</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</li>
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />New</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</li>
and I need to toggle the <div class="input-box"> adjacent to the checked radio (name="payment[ebzc_option]") button using prototype.
Can anybody help me to do this? I'd not worked on prototype before.
any hint on selecting radio button by name attribute (name="payment[ebzc_option]") in prototype.js

Answer 1

Set up a function that you can call both at page load and whenever a radio button is clicked.
function setSubmenuVisibility(){
$$('input[type="radio"]').each(function(elm){
if(elm.up('label') && elm.up('label').next('div')){
var sub = elm.up('label').next('div');
if(elm.checked){
sub.show();
}else{
sub.hide();
}
}
});
}
setSubmenuVisibility();
document.on('click', 'input[type="radio"]', function(evt, elm){
setSubmenuVisibility();
});

Answer 2

You can toggle the visibility using Element.toggle

Answer 3

Many ways to do this
you could use the DOM traversal methods if the HTML will be the same
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
this.nextSiblings().first().toggle();
});
In this instance we use $$() to select all of the radio buttons with the name attribute payment[ebzc_option] and use the invoke() method to call observe() on all of them. In the closure of the event handler this is the element the event happened on, then you collect all of the next siblings using nextSiblings(), pick the first() one out of the array and run toggle() on it.
This is not ideal because it depends on the HTML structure to stay the same.
Lets try adding an id to the divs you want to toggle (ids need to be unique like you discovered), and lets add that id to the radio button in a data attribute. Data attributes can be anything you want just need to start with data-
<div class="input-box" id="input-box_saved">
<input type="radio" name="payment[ebzc_option]" value="saved" data-toggle="input-box_saved" />
Now our observer statement changes to
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$(this.readAttribute('data-toggle')).toggle();
});
you could even extend the observer closure to make sure only one of the divs is open at a time
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$$('.input-box').invoke('hide');
$(this.readAttribute('data-toggle')).show();
});
EDIT I missed that the <input> and <div> were not siblings as the closing </label> was going off the right side of the box. In this instance the DOM traversal would be a bit more up() and down() to get it to work.