showing a div after selecting a radio button....
<p>I have this code and what I need to with this is when selecting one radio button I want to display subscription_rate div. At the moment both main DIVs display together. I need to keeping hide subcription_rate div when click on a radio button. </p>

<p>hope someone help me out this..</p>

<p>this is my code so far...</p>

<pre><code>&lt;div class="form-element-row"&gt;
    &lt;div class="first-child"&gt;
        &lt;label for="name"&gt;Registration Period&lt;img alt="required" src="images/required_star.png" /&gt;:&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="last-child"&gt;
        &lt;input type="radio"  name="period"  value="1" /&gt;1 Year
        &lt;input type="radio"  name="period"  value="2" /&gt;2 Years
        &lt;input type="radio"  name="period"  value="3" /&gt;3 Year                              
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="subscription_rate"&gt;
    &lt;div class="first-child"&gt;
        &lt;label&gt;&amp;nbsp;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="last-child"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;Subscription Rate&lt;/th&gt;
            &lt;th&gt;1 Year&lt;/th&gt;
            &lt;th&gt;2 Years&lt;/th&gt;
            &lt;th&gt;3 Years&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td style="text-align: left;"&gt;Lanka Institute Rates for Tutors within their subscription period.&lt;/td&gt;
            &lt;td width="18%"&gt;Rs.3000&lt;/td&gt;
            &lt;td width="18%"&gt;Rs.4500&lt;br /&gt;&lt;span&gt;Save 25%&lt;/span&gt;&lt;/td&gt;
            &lt;td width="18%"&gt;Rs.7500&lt;br /&gt;&lt;span&gt;Save 50%&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
