[jQuery] Show/hide on radio button click

[Magnificent]

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:

<p><input type="radio" name="donate_by" value="by_cause"
id="cause"><label for="cause">By Cause:</label></p>
<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>

<p><input type="radio" name="donate_by" value="by_foundation"
id="foundation"><label for="foundation">By Foundation:</label></p>
<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.