Question

I am nesting tables within tables and want to toggle the them when you click on a <th class="folder">

    $('table').each(function(){
        $('th.folder', this).bind('click', function(){
            $(this).closest('table').children('tbody').toggle();
        });
    });

Here is some typical HTML:

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th class="type">Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table>
          <thead>
            <tr>
              <th class="folder" colspan="2">Deal flow</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>item 1</td>
              <td>image</td>
            </tr>
            <tr>
              <td>item 2</td>
              <td>image</td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th class="folder" colspan="2">Rejected deals</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>item 3</td>
              <td>image</td>
            </tr>
            <tr>
              <td>item 4</td>
              <td>image</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Doesn’t seem to work and I can’t figure out why! Any ideas?

Answer 1

See Working Example

---

Try this instead:

  $('.folder').bind('click', function(){
     $(this).closest('table').children('tbody').toggle();
  });