title: How to use jQuery to show/hide divs based on radio button selection?
body: <p>I have some radio buttons and I'd like to have different hidden divs show up based on which radio button is selected. Here's what the HTML looks like:</p>
  
  <pre><code>&lt;form name="form1" id="my_form" method="post" action=""&gt;
      &lt;div&gt;&lt;label&gt;&lt;input type="radio" name="group1" value="opt1"&gt;opt1&lt;/label&gt;&lt;/div&gt;  
      &lt;div&gt;&lt;label&gt;&lt;input type="radio" name="group1" value="opt2"&gt;opt2&lt;/label&gt;&lt;/div&gt;  
      &lt;div&gt;&lt;label&gt;&lt;input type="radio" name="group1" value="opt3"&gt;opt3&lt;/label&gt;&lt;/div&gt;  
      &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
  
  ....
  
  &lt;style type="text/css"&gt;
      .desc { display: none; }
  &lt;/style&gt;
  
  ....
  
  &lt;div id="opt1" class="desc"&gt;lorem ipsum dolor&lt;/div&gt;
  &lt;div id="opt2" class="desc"&gt;consectetur adipisicing&lt;/div&gt;
  &lt;div id="opt3" class="desc"&gt;sed do eiusmod tempor&lt;/div&gt;
  </code></pre>
  
  <p>And here's my jQuery:</p>
  
  <pre><code>$(document).ready(function(){ 
      $("input[name$='group2']").click(function() {
          var test = $(this).val();
          $("#"+test).show();
      }); 
  });
  </code></pre>
  
  <p>The reason I'm doing it that way is because my radio buttons and divs are being generated dynamically (the value of the radio button will always have a corresponding div). The code above works partially - the divs will show when the correct button is checked, but I need to add in some code to make the divs hide again once the button is unchecked. Thanks!</p>