Jquery IF maybe?

Question

I use the following code to find a particular table, hide it then show it on click:

$(function() {
  $('.Nav table .navitem').hide();
  $('.Nav table.navheader').click(function() {
    $(this).parent().parent().next().find(".navitem").slideToggle('100');
  });
});

Here is the HTML Output:

<div class="Nav">

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <table class="navheader" cellpadding="0" cellspacing="0" border="0" width="100%">
       <tr>
        <td style="width:100%;"><a navheader" href="#">Header</a></td>
       </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" width="100%" class="navSubMenu">
       <tr>
        <td>
         <table class="ms-navitem" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
           <td style="width:100%;"><a class=" ms-navitem" href="#" style="border-style:none;font-size:1em;">Item</a></td>
          </tr>
         </table>
        </td>
       </tr>
      </table>

A basic accordion navigation hacked together from a table, however some of the .havheader's do not have .navitem's so I dont want these to be clickable.

How best can i achieve this?

Answer 1

Change this selector:

$('.Nav table.navheader')

to this:

$('.Nav table.navheader:has(.navitem)')

Answer 2

If you just want accordion, maybe it is better to use jQuery UI instead...