title: Greying out certain parts of html until a radio button is checked
body: <p>I have a weird request i havent had before and im not sure how to go about it.</p>
  
  <p>Basically i have an online application form, each question is contained in its own div, at first i want the first div shown and the rest of the questions to be 'greyed' out, then when someone clicks a radio button for the first question, the second question then ungreys itself and so on.</p>
  
  <p>The code for the HTML i have so far is below, i was wondering if someone could help me out with this.</p>
  
  <pre><code>&lt;div class="line"&gt;
      &lt;label&gt;&lt;span&gt;1.&lt;/span&gt;This is a first question?&lt;/label&gt;
      &lt;div class="right-box small"&gt;
          &lt;input type="radio" name="" value=""&gt;&lt;label style="padding-left: 3px; padding-right: 24px;"&gt;No&lt;/label&gt;&lt;input type="radio" name="" value=""&gt;&lt;label style="padding-left: 3px;"&gt;Yes&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="line"&gt;
      &lt;label&gt;&lt;span&gt;2.&lt;/span&gt;This is a second question?&lt;/label&gt;
      &lt;div class="right-box small"&gt;
          &lt;input type="radio" name="" value=""&gt;&lt;label style="padding-left: 3px; padding-right: 24px;"&gt;No&lt;/label&gt;&lt;input type="radio" name="" value=""&gt;&lt;label style="padding-left: 3px;"&gt;Yes&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="line"&gt;
      &lt;label&gt;&lt;span&gt;3.&lt;/span&gt;This is a third question?&lt;/label&gt;
      &lt;div class="right-box small"&gt;
          &lt;input type="radio" name="" value=""&gt;&lt;label style="padding-left: 3px; padding-right: 24px;"&gt;No&lt;/label&gt;&lt;input type="radio" name="" value=""&gt;&lt;label style="padding-left: 3px;"&gt;Yes&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>