Make collapsible table rows I'm looking to make a Drupal 7 table with collapsible rows. I'm really looking to do what was asked in https://stackoverflow.com/questions/801082/how-to-implement-collapsible-table-rows-in-javascript

I'm just trying to bend Drupal 7 into shape to do it. Do far, I have created a table which has the extra "section" rows, and I've assigned an HTML class and id to the rows that are to be collapsed. My problem is the Javascript and CSS required to do this.

My rows are created something like this:

foreach($results as $row) {
  ...
  if($row_needs_section_header) {
    $section_number++;
    $rows[] = array(
      'data' =&gt; array("Section $section_number"),
      'class' =&gt; (array('class' =&gt; 'collapsitablesection')),
      'id' =&gt; "collasitableheader$section_number",
    );
  }
  $rows[] = array(
    'data' =&gt; array(
       $column_1,
       $column_2,
       ...
    ),
    'id' =&gt; "collapsitable$section_number",
    'class' =&gt; array('class' =&gt; 'collasitable')),
  );
}


This seems to generate suitable HTML, with each of the rows that are to be collapsed being in an "id" with the section number in it, and also having a class of "collapsitable".

I'm now trying to replicate "misc/collapse.js", but instead of working with fieldsets, make it work with my special table rows. I'm at something of a loss with this. Has anyone got any ideas about where to go next?
You can use the nextUntil() jQuery function like this:

(function ($) {
  Drupal.behaviors.collapsibleTable = {
    $('tr.collapsitablesection').toggle(
      function() {
        $(this).nextUntil('tr.collapsitablesection').hide();
      },
      function() {
        $(this).nextUntil('tr.collapsitablesection').show();
      }
    ).click();
  };
})(jQuery);


Put this in the script.js of your theme if it has one, if not add a new one, see the documentation: Using the theme's .info file (Drupal 6 &amp; 7).