How to make a div visible and hidden on selecting different radio button in mvc using jquery?

Question

This is my view

if (ViewBag.delivery != "1")
{
    <div id="shipdetail">
        <label>Shipping Details</label>
        <div class="form-group">
            <p>Shipping Address</p>
            @Html.TextBox("ship_address", null, new { @class = "form-control valid", @data_val = "true", @data_val_required = "Shipping Address" })
        </div>
    </div>
}

My jQuery:

$(document).ready(function () {
    $("#shipdetail").hide();

    $("input[name='DiscountedPrice']").change(function () {
        $("#shipdetail").toggle();
    });
});

I want to hide this part when I click the first radio button and show the part when I click the second radio button. Here is my radio button part. It is inside an else part of a condition.

else 
{
    <div class="form-inline">
        <label>
            @Html.RadioButtonFor(model => model.DiscountedPrice, "Pick from store", new { @class = "form-control valid", @data_val = "true", @data_val_required = "Delivery Type" })
        </label>
        <label>I can pick it from the store</label><br />

        <label>
            @Html.RadioButtonFor(model => model.DiscountedPrice, "Need door delivery", new { @class = "form-control valid", @data_val = "true", @data_val_required = "Delivery Type" })
        </label>
        <label>I would like to get it on my door</label><br />
    </div>
}

What is the error here? I cant do the hide/show here.?

Answer 1

Click on view source and see the HTML, It looks like your shipdetail is not rendered when the radio button is rendered (if delivery, than render shipdetails, if not, render radiobuttons, MVC if and else are in Server side) So you cannot change shipdetails appearance in client side, because it doesn't exists, instead of if and else section, you should hide or show your div in css

 <div id="shipdetail" style='display:@ViewBag.Delivery!='1'?"none":"inline"'>
    <label>Shipping Details</label>
    <div class="form-group">
        <p>Shipping Address</p>
        @Html.TextBox("ship_address", null, new { @class = "form-control                valid", @data_val = "true", @data_val_required = "Shipping Address" })
    </div>
</div>

--No if, No else

       <div class="form-inline">
    <label>
        @Html.RadioButtonFor(model => model.DiscountedPrice, "Pick from store", new { @class = "form-control valid", @data_val = "true", @data_val_required = "Delivery Type" })
    </label>
    <label>I can pick it from the store</label><br />

    <label>
        @Html.RadioButtonFor(model => model.DiscountedPrice, "Need door delivery", new { @class = "form-control valid", @data_val = "true", @data_val_required = "Delivery Type" })
    </label>
    <label>I would like to get it on my door</label><br />
</div>