EzTreez (Pronounced Easy Treesy) is a small jQuery plugin that converts a table, list, or nested divs into a tree that collapses when clicked on.

The snippet:

<script>
  $(function () {
    $('.top').ezTreez({
      'hierarchy': ['one','two','three'],
      'click_element_selector': '.click'
    });
  });
</script>

...

<table class="top">
  <tr class="one">  <td>  <a class="click">[x]</a>  one   </td></tr>
  <tr class="two">  <td>  <a class="click">[x]</a>  two   </td></tr>
  <tr class="two">  <td>  <a class="click">[x]</a>  two   </td></tr>
  <tr class="three"><td>  <a class="click">[x]</a>  three </td></tr>
  <tr class="three"><td>  <a class="click">[x]</a>  three </td></tr>
  <tr class="three"><td>  <a class="click">[x]</a>  three </td></tr>
  <tr class="two">  <td>  <a class="click">[x]</a>  two   </td></tr>
  <tr class="one">  <td>  <a class="click">[x]</a>  one   </td></tr>
  <tr class="two">  <td>  <a class="click">[x]</a>  two   </td></tr>
  <tr class="three"><td>  <a class="click">[x]</a>  three </td></tr>
  <tr class="three"><td>  <a class="click">[x]</a>  three </td></tr>
  <tr class="two">  <td>  <a class="click">[x]</a>  two   </td></tr>
  <tr class="two">  <td>  <a class="click">[x]</a>  two   </td></tr>
</table>


The class names that define the hierarchy are passed in via an options object to the plugin in an array.  In the above example, when clicking on the tr with a class of 'one' everything up to the next tr with a class of 'one' will be hidden.  When you click on a tr with a class of 'two', it will hide all of the next neighboring nodes until it hits one with a class of 'two' or 'one'.  When you click on a tr with a class of 'three' it will do nothing since there are no deeper nestings.