On-click radio button, hide div

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!