title: Show multiple divs when clicking radio button
body: <p>I have some radio buttons that are containing an image:</p>
  
  <pre><code>&lt;input type="radio" name="site" id="au" value="1" /&gt;&lt;label for="au"&gt;&lt;img src="images/auditup.jpg" alt="Audit" /&gt;&lt;/label&gt;
  &lt;input type="radio" name="site" id="ma" value="2" /&gt;&lt;label for="ma"&gt;&lt;img src="images/repairup.jpg" alt="Maintenance" /&gt;&lt;/label&gt;
  &lt;input type="radio" name="site" id="tr" value="3" /&gt;&lt;label for="tr"&gt;&lt;img src="images/transportup.jpg" alt="Transport" /&gt;&lt;/label&gt;
  &lt;input type="radio" name="site" id="vi" value="4" /&gt;&lt;label for="vi"&gt;&lt;img src="images/visitup.jpg" alt="Visit" /&gt;&lt;/label&gt;
  </code></pre>
  
  <p>i have 6 div's with content</p>
  
  <pre><code>&lt;div id="hygiene"&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;input type="checkbox" name="achygiene" value="1" id="achygiene" /&gt;&lt;label for="achygiene"&gt;I agree to the terms and conditions.&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div id="security"&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;input type="checkbox" name="acsecurity" value="1" id="acsecurity" /&gt;&lt;label for="acsecurity"&gt;I agree to the terms and conditions.&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div id="terms"&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;input type="checkbox" name="acterms" value="1" id="acterms" /&gt;&lt;label for="acterms"&gt;I agree to the terms and conditions.&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div id="defence"&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;input type="checkbox" name="acdefence" value="1" id="acdefence" /&gt;&lt;label for="acdefence"&gt;I agree to the terms and conditions.&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div id="safety"&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;input type="checkbox" name="acsafety" value="1" id="acsafety" /&gt;&lt;label for="acsafety"&gt;I agree to the terms and conditions.&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What i would like to have is when someone is ticking radio button with id "au" that (f.e.) div hygiene, terms, defense is showing.
  but when someone is ticking radio button with id "ma" the divs (f.e.) hygiene and security is showing. and for an other radio button all of the divs are showing. It may not be randomly! so i have to set what divs will open when you tick a radio button. Keep in mind that some radio buttons have the same div's</p>
  
  <p>I'm not good into jQuery at all, so that is why i'm asking for help here.</p>
  
  <p>EDIT:
  i have found a lot of examples on stack but not any example with multiple div's</p>
  
  <p>For example this code:</p>
  
  <pre><code>$(function(){
      $(':radio').click(function() {
          $('#' + $(this).attr('class')).fadeIn().siblings('div').hide();
      })
      .filter(':checked').click();//trigger the click event
  });​
  </code></pre>
  
  <p>I understand the way it works but don't know how to do it if the name of the id's and or classes cannot be the same </p>