On-click radio button, hide div

Question

I am trying to hide a div when somebody clicks on a radio button on a form (second radio button), but when the click on the first radio button, the div shows back up (a toggle). Here is my working code: http://jsfiddle.net/NKr7M/

Here's the HTML if you would like:

<div class="grid howAnswer">
    <div class="col-1">
        <div class="button-left">
            <img src="http://i.imgur.com/RVmh2rz.png" />

            <input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" onclick="toggle(this)" />
        </div><!-- .button-left -->

        <div class="text-area top-text-area">
            <label for="id_delivery_0">
                AnswerChat By Appointment (Fastest)
            </label>
        </div><!-- .text-area -->
    </div><!-- .col-1 -->

    <div class="col-1">
        <div class="button-left" style="margin-left: 15px;">
            <img src="http://i.imgur.com/8J0SEVa.png" />

            <input type="radio" id="id_delivery_2" value="email" name="delivery" onclick="toggle(this)" />
        </div><!-- .button-left -->

        <div class="text-area bottom-text-area">
            <label for="id_delivery_2">
                AnswerMail ASAP (Within 1-2 days)
            </label>
        </div><!-- .text-area -->
    </div><!-- .col-1 -->
</div><!-- .grid -->

<!-- THIS IS WHAT I WANT TO HIDE -->
<div class="formInput">
    <p>Let's try and hide this div</p>
</div><!-- .formInput -->

As well as the CSS:

/* General Declarations */
body { font-family: Arial, Helvetica, sans-serif; }

ul li { list-style: none; }

/* Form */
.col-1 li.howDoPadding { padding-bottom: 10px!important; }

.byAppointment { margin: 0 0 -4px 10px;}

.offlineForm .lightBlueText { 
    color: #80A9BD; 
    display: inline;
}

/* Grid */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

.grid.howAnswer > div.col-1 {
    padding-left: 90px;
    position: relative;
}

.grid.howAnswer .button-left {
    width: 80px;
    position: absolute;
    margin-left: 20px;
    left: 0;
    top: 0;
}

.button-left img { margin-right: -5px; }

.top-text-area { margin: 15px 0 10px; }

.bottom-text-area { margin: 10px 0 15px; }

.button-left { margin: 10px 0; }

/* Grid Gutters */
[class*='col-'] {
    float: left;
    padding-right: 20px;
}

[class*='col-']:last-of-type { padding-right: 0; }

.col-1 { width: 100%; }

I'm not very proficient with JavaScript so I would very much appreciate any help I can get. Thanks!

Answer 1

LIVE DEMO

$(':radio[name=delivery]').change(function(){ // Or simply: $("[name=delivery]")
    $('.formInput').toggle();
});

Answer 2

Try this:

$("#id_delivery_0").on("change",function(){
    if($(this).prop("checked"))
       $(".formInput").hide();     
});

$("#id_delivery_2").on("change",function(){
    if($(this).prop("checked"))
       $(".formInput").show();     
});

jsFiddle: http://jsfiddle.net/hescano/NKr7M/3/