title: Hide/Show HTML tables
body: <p>I have an HTML document which contains tables. Some tables are subtables of other ones. You can have an example <a href="http://jsfiddle.net/juf5603f/3/" rel="nofollow">here</a>:</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;table class='top'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;TopLevel&lt;/td&gt;
          &lt;td&gt;A&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class='sub1'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;SubLevel 1&lt;/td&gt;
          &lt;td&gt;B&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class='sub2'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;SubLevel 2&lt;/td&gt;
          &lt;td&gt;C&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class='sub2'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;SubLevel 2&lt;/td&gt;
          &lt;td&gt;D&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class='sub1'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;SubLevel 1&lt;/td&gt;
          &lt;td&gt;E&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class='sub2'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;SubLevel 2&lt;/td&gt;
          &lt;td&gt;F&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class='top'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;TopLevel&lt;/td&gt;
          &lt;td&gt;G&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class='sub1'&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;SubLevel 1&lt;/td&gt;
          &lt;td&gt;H&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='greyrow'&gt;
          &lt;td&gt;SubLevel 1&lt;/td&gt;
          &lt;td&gt;I&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>    table {
      border-collapse: collapse;
      border-width: 0px 0;
      box-shadow: 3px 3px 4px #AAA;
  }
  
  .greyrow{
      background-color: #c7c7c7;
      font-size: 16px;
      text-align: center;
      color: black;
      font-family: Verdana;
  }
  
  td{
      width: 100px;
  }
  
  .top{
      margin-bottom: 10px;
  }
  
  .sub1{
      display: none;
      margin-left: 20px;
      margin-bottom: 10px;                
  }
  
  .sub2{
      display: none;
      margin-left: 40px;
      margin-bottom: 10px;
  }
  </code></pre>
  
  <p>I would like to have only the toplevel tables displayed as default. This can be done with the css property "display: none".</p>
  
  <p>I would like to show the subtables when the user clicks on the upper level table. Any existing jquery script for this ?</p>