Show/Hide deep tables

Question

I've got this bit of JQUERY:

<script>
function initNav() {
    $('.nav tr table td table').hide();
     $('.nav .navheading').click(
      function() {
       $('.nav tr table td table').slideToggle('500');
      }
     );
}
$(document).ready(function() {initNav();});
</script>

I've got a table for navigation which looks like the HTML code below:

THE CLASSES must remain and cannot be altered in the source, could be changed dynamically via Jquery?

<div class="nav">

<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading" href="#">Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;">
               <a class="navitem" href="#" style="border-style:none;font-size:1em;">Pic Link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading" href="#">Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;">
               <a class="navitem" href="#" style="border-style:none;font-size:1em;">Pic link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

</div>

It does hide the correct table on load but the slideToggle expands and collapses the table where I want one click to open and one click to close.

Probably missing something really basic....

Answer 1

1. I didn't see any nav class in your code.
2. You can use the function children("selector") to select child elements

Answer 2

I change the script and the html class:

JAVSCRIPT

<script type="text/javascript">
$(function() {
    $('.nav .navsub').hide();
    $('.nav .navheading').click(function() {
        $('.nav .navsub').hide();
     $(this).parent().parent().next().find(".navsub").slideToggle('500');
    });
});
</script>

HTML

<div class="nav">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading_link" href="#">a Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;"><a class="navitem" href="#" style="border-style:none;font-size:1em;">a Pic Link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading_link" href="#">b Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;">
               <a class="navitem" href="#" style="border-style:none;font-size:1em;">b Pic link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

</div>

--EDIT

$(function() {
    $(".nav .navsub").hide();
    $(".nav a[class='navheading']").click(function() {
        $(".nav .navsub").hide();
     $(this).parent().parent().parent().parent().parent().parent().next().find(".navsub").slideToggle("500");
    });
});