Column Click Issue

I have two column开发者_开发百科s...the right column I want to open up and show the contents when either it's header is clicked, or it's corresponding value in the left column is clicked...and toggle off when another value is clicked. Thanks for the help.

<table>
    <tr>
       <th>1</th>
       <td>
           <div class="showMeOnClick">stuff</div>
       </td>
    </tr>
    <tr>
       <th>2</th>
       <td>
           <div class="showMeOnClick">different stuff</div>
       </td>
    </tr>
    <tr>
       <th>3</th>
       <td>
           <div id="showMeOnClick">stuff</div>
       </td>
    </tr>
</table>

$('th').each(function() {
    $(this).click(function() {
        $(this).find('td').toggle();
    });
});

$('th').click(function(){
  $('.showMeOnClick').hide(); // hide everything
  $(this).siblings('td').find('.showMeOnClick').show(); // show div in the same row
});

if you want to capture if the div is allready visible (not hide it and show again, use a class)

$('th').click(function(){
    if ($(this).is('.active') == false) {
      $('th').removeClass('active');
      $('.showMeOnClick').hide(); // hide everything
      $(this).addClass('active').siblings('td').find('.showMeOnClick').show(); // show div in the same row
    }
});