Close collapsible panel when a radio button selected
I have a set of radio buttons in a collapsible panel as shown below. I want to have the panel collapse when the user clicks one of the radio buttons.
Here is the code I used. Seems like it doesnt work:
<script type="text/javascript">
var buttons = document.getElementById("radio-choice-2");
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].checked) {
$(".selector" ).trigger( "collapse" );
}
}
</script>
<div data-role="collapsible" data-content-theme="c">
<h3>Filter</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="unchecked" />
<label for="radio-choice-21">None</label>
<input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2" />
<label for="radio-choice-22">Dog</label>
<input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3" />
<label for="radio-choice-23">Hamster</label>
<input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4" />
<label for="radio-choice-24">Lizard</label>
</fieldset>
</div>