Jquery Select DIV below Table

Question

I have some simple markup:

<table>
 <tr>
  <td>Menu Item</td>
 </tr>
</table>

<div>
 <table>
  <tr>
   <td>Menu Item Sub Menu</td>
  </tr>
  </table>
</div>

Im currently hiding the DIV, however if you click the in the first table I want it to .show() the Table in the div.

Does that make sense?

I should really get my head around, parent(), next(), find()

Answer 1

$(table).siblings('div');

Gives you all siblings to the element table that are a div. You should make sure that there is only this div (or another way that you can uniquely select it).

Answer 2

Give the first table an id

$('#theTable').next().show();

Answer 3

If you really don't want to add an id to the div and table, you can do the following. I use toggle() instead of show(), but replace with show() if you want.

$("table").click(function(){
   $("div").toggle();
   return false;
});

But, i'd add an id to the table and div, then a click event.

$(document).ready(function(){
   $("#div1").hide();
   $("#table1").click(function(){
      $("#div1").toggle();
      return false;
   });
});

Or if you want to use next(), try this for the click function:

$("#table1").click(function(){
   $(this).next().toggle();
   return false;
});