Elegant displaying form content with radio buttons

Question

I've got a HTML form with radio buttons ("Yes", "No") and accordingly to the button's value form slides up or down. Here's js code:

$(document).ready(function () {
    $("#first_button_parent").css("display", "none");

    $(".is_first_button").click(function () {
        if ($('input[name=first_button]:checked').val() == "Yes") {
            $("#first_button_parent").slideDown("fast");
        } else {
            $("#first_button_parent").slideUp("fast");
        }
    });
    $("#second_button_parent").css("display", "none");

    $(".is_second_button").click(function () {
        if ($('input[name=second_button]:checked').val() == "Yes") {
            $("#second_button_parent").slideDown("fast");
        } else {
            $("#second_button_parent").slideUp("fast");
        }
    });
});

I want to simplify this function, I mean get rid of different cases for every button.

Here's jsfiddle example: http://jsfiddle.net/afjBA/

Answer 1

How does this look:-

http://jsfiddle.net/9dbLp/

    $(document).ready(function () {
    $("#first_button_parent, #second_button_parent").css("display", "none");
    $(':radio').on('click',function(){
        var elem = $("ol.formset", $(this).parent());
        if($(this).val() === "Yes" )
            elem.slideDown('slow');
        else
            elem.slideUp('slow');
    });
});

Answer 2

With a couple lines of code and some css classes, you could make this work with any button combination and allow for different types/values. I added attributes to your radio buttons for showiffield and showifvalue, and added css classes. You could also do it via script and add animations if needed:

http://jsfiddle.net/afjBA/11/

$(document).ready(function () {
    $(".conditionaltarget").parent().hide();
});

$(".conditional").on('change',function() {
    var btnVal = $(this).val();
    $("[showifkey="+$(this).attr('name')+"]").each(function() {
        if(btnVal==$(this).attr('showifvalue'))
        {
            $(this).parent().show();
        } else {
            $(this).parent().hide();
        }
    });  
});

Answer 3

Here's a streamlined version of your jQuery, with the HTML cleaned up:

jsFiddle example

jQuery

$('ol.formset input[type=text]:gt(0)').hide();
$('ol.formset input[type=radio]').click(function () {
    if ($(this).val() == 'Yes') $(this).parent('li').next('li').find('input').slideDown("fast");
    if ($(this).val() == 'No') $(this).parent('li').next('li').find('input').slideUp("fast");
});

HTML

<form class="form" method="post">
    <fieldset>
        <ol class="formset">
            <li>
                <label for="id">id</label>
                <input type="text" id="id" name="id" />
            </li>
            <li>
                <label for="first_button">this?</label>
                <input type="radio" name="first_button" value="Yes" class="is_first_button" />Yes
                <input type="radio" name="first_button" value="No" class="is_first_button" />No</li>
            <li>
                <ol id="first_button_parent" class="formset">
                    <li>
                        <input type="text" id="field_a" />
                    </li>
                </ol>
            </li>
            <li>
                <label for="second_button">or maybe this?</label>
                <input type="radio" name="second_button" value="Yes" class="is_second_button" />Yes
                <input type="radio" name="second_button" value="No" class="is_second_button" />No</li>
            <li>
                <ol id="second_button_parent" class="formset">
                    <li>
                        <input type="text" id="field_b" />
                    </li>
                </ol>
            </li>
        </ol>
        <input class="button" type="submit" value="send" />
    </fieldset>
</form>