title: How to Show or Hide multiple divs with multiple checkboxes
body: <p>I have a requirement, that I have multiple check boxes. 
  I have a set of checkbox related content which are in <code>&lt;p&gt;</code> tags. 
  When page loads all the <code>&lt;p&gt;</code> tag related content will display.
  After when user selects any checkbox 
  then only that checkbox related content will display and remaining will hide. 
  Next when user selects second checkbox second checkbox related content will display.</p>
  
  <p>Below is the <code>&lt;p&gt;</code> tag content like this i have 20 <code>&lt;p&gt;</code> tags</p>
  
  <pre><code>&lt;p id="sb1"&gt;Checkbox content one&lt;/p&gt;
  &lt;p id="sb2"&gt;Checkbox content two&lt;/p&gt;
  
  &lt;input name="chk1" type="checkbox" id="chk1" value=""&gt;chekme1
  &lt;input name="chk2" type="checkbox" id="chk2" value=""&gt;checkme2
  </code></pre>
  
  <p>Here is my code </p>
  
  <pre><code>$(document).ready(function()
  {
      if($(this).prop('checked'))
      {
          $('#chk1').prop('checked', true);
          $("#sb2,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").hide();
      }
      else
      {
          $('#chk2').prop('checked', false);
          $("#sb1,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").show();
      }
  });
  </code></pre>
  
  <p>Can some one please help me, like this i have 20 checkboxes and 20 <code>&lt;p&gt;</code> tags, i tried in many ways . </p>
  
  <p>Please help me in this regard, any help be greatly appreciated..</p>