Make collapsible table rows

Question

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' => 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 about where to go next?

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

Answer 2

I revised tostinni's anwer so I don't need a 2nd collapsiblesection row to define the section.

Here I have a main row (class can-collapse-section) that stays in place while clicking it toggles visibility of the subrows below that row (class can-collapse-row).

I also added a font-awesome icon for both states to indicate the row can be expanded / is expanded.

(function($, Drupal) {
// Allows collapse of table rows with the can-collapse-row class
// Toggle is provided by the first row above with the can-collapse-section class
Drupal.behaviors.collapsibleTable = {
    attach: function(context, settings) {
        $('tr.can-collapse-section').toggle(
                function() {
                    $(this).nextUntil(':not(tr.can-collapse-row)').hide();
                    $(this).find("i").removeClass('icon-caret-down').addClass('icon-caret-right');
                },
                function() {
                    $(this).nextUntil(':not(tr.can-collapse-row)').show();
                    $(this).find("i").removeClass('icon-caret-right').addClass('icon-caret-down');
                }
        ).click();
    }
};

}(jQuery, Drupal));