Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

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

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.