show and hide divs based on radio button click

Question

I have checked show and hide divs based on radio button click, but my code still doesn't work. Basically the div tag will be hidden unless click the "package_1"

    HTML is like this:
   <table><tr><td>
    <input type="radio" name="cars" id="Package_1"  />
    <input type="radio" name="cars" id="Package_2"/> 
   </td></tr></table>   
    <div class="package_extension"></div>  

   JQuery below:  

    $(".package_extension").hide();
    $("#Package_1").click(function(){
       $(".package_extension").show();
      });

Your JavaScript might need to be wrapped in a DOM ready event. — halfer, May 22 '13 at 19:52
I don't know why this one is closed. The question is relevant for a large group and the answers given are very helpful — Richard de Ree, Nov 13 '16 at 13:02

score 1 · Answer 1 · answered May 22 '13 at 17:37

1

your jquery should be like this, you've missed the quote and also wrong placement of parenthesis

 $(".package_extension").hide();
 $("#Package_1").click(function(){
     $(".package_extension").show();
 });

answered May 22 '13 at 17:37

Ujjwal Manandhar

2,194
16
20

Thank you for editing, but it still doesn't work... – Pluto May 22 '13 at 17:39
did you placed the javascript code inside the script tag ? – Ujjwal Manandhar May 22 '13 at 17:41
Yes. It works know, I forgot to type a ;....Thanks! – Pluto May 22 '13 at 17:51

score 0 · Answer 2 · answered May 22 '13 at 17:38

0

You are missing quotes

$('.package_extension').hide();
 $('#Package_1').click(function(){
 $('.package_extension').show();

 )};

try this.

answered May 22 '13 at 17:38

user1

1,063
1
8
28

It doesn't work either. – Pluto May 22 '13 at 17:42

score 0 · Answer 3 · answered May 22 '13 at 17:42

Please have a look at http://jsfiddle.net/2dJAN/46/

<table><tr><td>
    <input type="radio" name="cars" id="Package_1"  />
    <input type="radio" name="cars" id="Package_2"/> 
   </td></tr></table>   
    <div class="package_extension"> package_extension </div>  

$(".package_extension").hide();
     $("#Package_1").click(function(){
         $(".package_extension").show();
     });

show and hide divs based on radio button click

3 Answers3