This should works not sure about the performance though
$(function() {
$('p').next('ul').hide(); //hide donation choice children
$('input[name="donate_by"]').click(function() { //donation
choice radio button click
$(this).next().css('font-weight','bold');
$(this).parent().siblings('p').children('label').css('font-
weight','normal');
$(this).parent().next().slideDown();
$(this).parent().siblings('p').next('ul').slideUp();
});
});
On Aug 5, 10:52 am, Magnificent
<imightbewrongbutidontthin...@gmail.com> wrote:
> 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.
