[jQuery] Show/hide on radio button click
Hi all,
I'm trying to do a show/hide on a radio button click and I do have it
working, but I'd like to make it more...extensible/independent of hard-
coding children elements to show hide. My dummy html structure is:
<input type="radio" name="donate_by" value="by_cause"
id="cause"><label for="cause">By Cause:</label>
<ul id="cause_children" class="clearfix">
<li>Please select cause(s) below:</li>
<li><input type="checkbox"> Cause 1</li>
<li><input type="checkbox"> Cause 2</li>
<li><input type="checkbox"> Cause 3</li>
</ul>
<input type="radio" name="donate_by" value="by_foundation"
id="foundation"><label for="foundation">By Foundation:</label>
<ul id="foundation_children" class="clearfix">
<li><input type="checkbox"> Foundation 1</li>
<li><input type="checkbox"> Foundation 2</li>
<li><input type="checkbox"> Foundation 3</li>
</ul>
My jquery code is:
$(function() {
$('#cause_children, #foundation_children').hide(); //hide donation
choice children
$('input[name="donate_by"]').click(function() { //donation choice
radio button click
//$(this).next().css('border', '1px solid blue');
//$(this).next().find('ul:first').css('border', '1px solid red');
//$(".donation_children").slideToggle('slow');
switch ( $(this).val() ) {
case 'by_cause' : //if by cause, show cause, hide foundation
$(this).next().css('font-weight', 'bold'); //bold cause
$('#foundation').next().css('font-weight', 'normal')//unbold
foundation
$('#cause_children').slideDown();
$('#foundation_children').slideUp();
break;
case 'by_foundation' : //if by foundation, show foundation, hide
cause
$(this).next().css('font-weight', 'bold'); //bold foundation
$('#cause').next().css('font-weight', 'normal')//unbold cause
$('#cause_children').slideUp();
$('#foundation_children').slideDown();
break;
}
});
});
I left some commented out stuff at the top of the function, hopefully
to give you an idea of what I tried. In particular:
$(this).next().find('ul:first').css('border', '1px solid red');
I was trying to get the first ul (the children to show/hide) on
"this" (the radio button clicked).
I'd like this to be flexible to where you could add more radio button/
children and as long as the structure stays the same, the show/hide
functionality works.