Collapsible rows

By zephirus on 30 Mar 2015 at 23:54 UTC

Hi,

I've posted this question in stackexchange but with no answers. Maybe here someone can help me.

http://drupal.stackexchange.com/questions/153212/colapse-even-rows-of-table

Basically, I need to have a way to render some information (multiple rows, or some kind of panel) below each of the odd rows in the picture. These rows or panel should be collapsible and collapsed by default.

I don't have experience with jquery but found that ctools_collapsible may be a good solution but I can't apply it to the theme table that I use in that example.

Any expert can guide me on how to do this? Or if this is the better solution?

Thanks!

Comments

I see a fundamental problem

Jaypan commented 31 March 2015 at 01:00

I see a fundamental problem here - if the row is collapsed, and the expand link is part of the row, then the link to expand the collapsed row will not be visible when the row is collapsed.

So before giving an answer, how exactly do you envision this working, from a user's point of view?

Hi Jaypan,

zephirus commented 31 March 2015 at 07:53

Hi Jaypan,

I didn't noticed that error. Of course the link to expand/collapse the rows must be in the odd ones. Thanks for the hint.
I found the perfect example of what I need in this site: http://www.statarea.com/predictions.

You have there in each row a 'stats' button on the right that does exactly what I want. It shows some data related with the row.

At this moment, what I have are simple rows that feed a theme table so maybe this is not the way to go but I really don't know another way. I really appreciate some suggestions to do it in a more proper way.

It's very hard to get information on how to implement this kind of specific behaviours for Drupal. I found information but never in the scope of drupal.

Here's a simple example:

Jaypan commented 31 March 2015 at 10:19

Here's a simple example:

$rows = array();
for(1 = 0; $i < 10; $i++)
{
  $row = array();
  $row[] = array('data' => t('Column !i', array('!i' => $i + 1)), 'header' => TRUE);
  $row[] = array('data' => '<span class="row_collapser">-</span>', 'header' => TRUE);
  $rows[] = $row;

  $row = array();
  $row[] = t('Data !i', array('!i' => $i + 1));
  $row[] = t('this is some data');
  $rows[] = $row;
}
$table = theme('table', array('rows' => $rows));

Then you can do this for your JS:

(function($, Drupal)
{
  function collapseLinkListener()
  {
    $(".row_collapser").once('collapse-link-listener', function()
    {
      $(this).click(function()
      {
        var collapsbileRow = $(this).parents("tr:first").next();
        if($(this).text === "-")
        {
          $(this).text("+");
          collapsibleRow.slideUp(300);
        }
        else
        {
          $(this).text("-");
          collapsibleRow.slideDown(300);
        }
      });
    });
  }

  Drupal.behaviors.collapsibleTableRows = {
    attach:function()
    {
      collapseLinkListener();
    }
  };
}(jQuery, Drupal));

Note - untested, but it should be close.

Thanks Jaypan,

zephirus commented 31 March 2015 at 22:22

Thanks Jaypan,

I tried your exact example so it would be easy to understand. I return your table in a page and everything shows correctly but I can't collapse the rows.

I added this to my resultspredictor.info:
scripts[] = js/resultspredictor.js

and created js/resultspredictor.js inside the module folder.

My code:

function resultspredictor_details_page() {
  $rows = array();
  for($i = 0; $i < 10; $i++) {
    $row = array();
    $row[] = array('data' => t('Column !i', array('!i' => $i + 1)), 'header' => TRUE);
    $row[] = array('data' => '<span class="row_collapser">-</span>', 'header' => TRUE);
    $rows[] = $row;

    $row = array();
    $row[] = t('Data !i', array('!i' => $i + 1));
    $row[] = t('this is some data');
    $rows[] = $row;
  }

  $table = theme('table', array('rows' => $rows));
  
  return $table;
}

Btw, the js file doesn't have any prefixs before the code you sent me right?

Thanks!

EDIT: collapsibleRow on line 9 of the js file was mispspelled. After correction I can't get the behaviour to show and now I don't see any errors in the console.

Turns out that table rows don

Jaypan commented 31 March 2015 at 22:56

Turns out that table rows don't support slideUp() and slideDown().

So you can do this:

(function($, Drupal)
{
  function collapseLinkListener()
  {
    $(".row_collapser").once('collapse-link-listener', function()
    {
      $(this).click(function()
      {
        var collapsibleRow = $(this).parents("tr:first").next();
        if($(this).text() === "-")
        {
          $(this).text("+");
          collapsibleRow.hide();
        }
        else
        {
          $(this).text("-");
          collapsibleRow.show();
        }
      });
    });
  }

  Drupal.behaviors.collapsibleTableRows = {
    attach:function()
    {
      collapseLinkListener();
    }
  };
}

No animation unfortunately, but it will do what you want.

Thanks Jaypan!!!

zephirus commented 31 March 2015 at 23:49

Thanks Jaypan!!!

The animation is not neccessary. I just think I will change the rows for some kind of panel, like in the site I referenced in a previous answer. Maybe even the animation will work then.