Click OK, hide the div

Question

I try to hide the div when someone clicks on the switch on the form (second switch), but when I click on the first switch, the div shows a backup (switch). Here is my working code: http://jsfiddle.net/NKr7M/

Here is the HTML if you want:

<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 try and hide this div</p> </div><!-- .formInput --> 

Like 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 am not very good at JavaScript, so I would really appreciate any help I can get. Thank you

Answer 1

Live demo

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

Answer 2

Try the following:

 $("#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/

Answer 3

You can use toggle() for this:

 $('#id_delivery_0').on("click", function(){ $(".formInput").hide(); }); $('#id_delivery_2').on("click", function(){ $(".formInput").show(); }); 

Working script:

http://jsfiddle.net/NKr7M/4/

Answer 4

I assume the jQuery library is fine, as you noted this with jQuery, so here is the jQuery answer:

 $(document).ready(function() { $("#id_delivery_0").click(function() { $(".formInput").show(); }); $("#id_delivery_2").click(function() { $(".formInput").hide(); }); }); 

Be sure to also add the jQuery library.

Answer 5

You can do something like:

 $('#id_delivery_2').click( function(){ $('.formInput').hide(); }); $('#id_delivery_0').click( function(){ $('.formInput').show(); }); 

Demo: http://jsfiddle.net/darkajax/jCuk9/

Answer 6

 $("#id_delivery_0").on('click',function(){ $(".formInput").find('p').show(); }); $("#id_delivery_2").on('click',function(){ $(".formInput").find('p').hide(); }); 

Fiddle

Answer 7

 $(document).ready(function(){ $('#button1').click(function(event) { $('#hide').hide(); }); $('#button2').click(function(event) { $('#hide').show(); }); });