How to decollapse section if radiobutton is checke

Question

I simple want to know how to collapse a div section when a radiobutton like below is checked

Radiobutton that I want checked to collapse a section

<div>
    @Html.RadioButtonFor(model => model.Transaction.PaymentProvider, "2")
    @Html.LabelFor(model => model.Transaction.PaymentProvider, "Pay with Credit Card")
</div>

Section that I wanted collapse if Radiobutton above is checked

<div class="panel-body">
    <table border="0" cellspacing="0" cellpadding="0" align="middle">
        <tr>
            <td width="100" border="0" class="paylabel">Card Number:</td>
            <td colspan="3" width="335" border="0" class="paylabel">
                <div class="editor-field">
                    @Html.EditorFor(model => model.Transaction.CreditCard.CardNumber)
                    @Html.ValidationMessageFor(model => model.Transaction.CreditCard.CardNumber)
                </div>
            </td>
        </tr>
    </table>
</div>

I am using bootstrap and tried the accordion classes but that only works with a hyperlink and I'm not sure how to make a condition if that radiobutton is checked then decollapse

<label class="radio">
<input checked="checked" data-val="true" data-val-number="The field PaymentProvider must be a number." data-val-required="The PaymentProvider field is required." id="Transaction_PaymentProvider" name="Transaction.PaymentProvider" type="radio" value="1"/>
<label for="Transaction_PaymentProvider">Pay with PayPal</label>
 <input id="Transaction_PaymentProvider" name="Transaction.PaymentProvider" type="radio" value="2" />
<label for="Transaction_PaymentProvider">Pay with Credit Card</label>
 </label>

this is the code that is being debugged from IE

Answer 1

using info from here jQuery click event on radio button doesn't get fired

$("input[name=Transaction_PaymentProvider]").click(function(){
    if($('input:radio[name=Transaction_PaymentProvider]:checked').val() == "2"){
        $('.panel-body').show();
    }else{
        $('.panel-body').hide();
    }
}

You will need to look at what name is generated for the radio button. I don't remember if the name will be . or _. http://api.jquery.com/show/ and http://api.jquery.com/hide/ go over ways you can customize the effect. Hopefully this helps.