How do I show a hidden DIV with Jquery when a user clicks a radio box?

Question

I am having difficulty showing a hidden div when a user selects a radio box.

This is my code:

The Jquery

<script>
$(document).ready(function () {
  $(".paypalmethod").click(function() {
  $(".paypalinfo").show('slow');

});

</script>

The html

<input name="method" type="radio" value="paypal" class="paypalmethod"/><img src="/images/paymentlogos/PayPal.png" />

<div class="paypalinfo" style="display:none">Paypal the safe and easy way to pay. Paypal accepts all major credit cards.</div>

Answer 1

You're missing a closing }); in your code, you need to close the document.ready and the .click(), like this:

$(document).ready(function () { //or just $(function() { works here as well
  $(".paypalmethod").click(function() {
    $(".paypalinfo:hidden").show('slow');
  });
});

Also, to not produce a fade when the element's already visible, add a :hidden selector in like I have above. This makes it only find/fade in the element if it's currently hidden, and wont re-fade it in when it's already shown.

Answer 2

it's a syntax error. you need to close your 2nd function and jQuery call:

$(document).ready(function () { $(".paypalmethod").click(function() { $(".paypalinfo").show('slow'); }); });