I have `div` within another `div`. I would like to show the div when a radio button is selected, in particular the "yes" radio button.

I tried adding e.preventDefault, but makes the radio button stop working.

JQuery:

```
<script>
$("#areaDiv input:radio").click(function () {

            var selectedVal = $("#areaDiv input:radio:checked").val();
            //alert(selectedVal);
            if (selectedVal == true) {
                $("#areaDetail").show();
            }
            else {
                $("#areaDetail").hide();
            }
        })
</script>

```

HTML:

```
<div id="areaDiv" class="inputGroup spacer">
                            <strong>@Html.DisplayNameFor(x => x.PreHealth)</strong>
                            <label class="unselectable labelledCheckbox">
                                @Html.RadioButtonFor(x => x.PreHealth, false)
                                No
                            </label>
                            <label class="unselectable labelledCheckbox">
                                @Html.RadioButtonFor(x => x.PreHealth, true)
                                Yes
                            </label>
                            <div id="areaDetail" hidden>
                                @Html.TextAreaFor(x => x.PreHealthArea)
                            </div>
                        </div>

```

I want the the texbox to show from the `div` with `id=areaDetail`, when the yes radio box is selected.