Make Collapsible Table Rows with Drupal 7?

Question

I'm looking to make a Drupal 7 table with collapsible rows. I'm really looking to do what was asked in http://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' => array("Section $section_number"),
      'class' => (array('class' => 'collapsitablesection')),
      'id' => "collasitableheader$section_number",
    );
  }
  $rows[] = array(
    'data' => array(
       $column_1,
       $column_2,
       ...
    ),
    'id' => "collapsitable$section_number",
    'class' => array('class' => '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 where to go next?

EDIT:

I've solved this - maybe not the most graceful, but it seems to work quite nicely.

I'll spare you the Drupal code, but my table looks like this:

<table>
<tr><td><span class="collapsitablesection" id="collapsitable1">header 1</span></td></tr>
<tr id="collapsitable1" class="collapsitable"><td>item 1</td></tr>
<tr id="collapsitable1" class="collapsitable"><td>item 2</td></tr>
<tr><td><span class="collapsitablesection" id="collapsitable2">header 2</span></td></tr>
<tr id="collapsitable2" class="collapsitable"><td>item 3</td></tr>
<tr id="collapsitable2" class="collapsitable"><td>item 4</td></tr>
</table>

The Javascript I have converts the <span>...</span> contents to a clickable link, and adds a click handler to toggle a <tr> that's got a specific id.

(function ($) {
Drupal.behaviors.togg = {
  attach: function (context, settings) {
  $('span.collapsitablesection').each(function() {
    $(this).html('<a class="collapsitablesection" href="#">' + $(this).html() + '</a>');
  });

  $('a.collapsitablesection').each(function () {
    $(this).click(function(e) {
      $("tr#" + $(this).closest('span').attr('id')).toggle(200);
      return false;
    });
  });
}
};
})(jQuery);

Thanks to the everyone that helped on this question, and these: http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery and http://stackoverflow.com/questions/5215316/convert-a-spans-text-into-a-hyperlink

Answer 1

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 & 7).