How to put all the comments in a collapsible fieldset ?

Posted by bumathan on November 10, 2006 at 1:25pm

Hi !
I wonder how to put all the comments and the "add a comment" link in a collapsible fieldset ?
Could you tell me in wich file do I have to specify that please ?

Thank you .

Matt

Comments

i think it's only possible

Posted by ufku on November 14, 2006 at 11:10pm

i think it's only possible with javascript. try adding this code into your theme's page file just before the closing </body> tag

<script type="text/javascript">
if (cTop = document.getElementById("comment")) {
  var cFieldset = document.createElement("FIELDSET");
  var cLegend = document.createElement("LEGEND");
  cFieldset.appendChild(cLegend);
  var cParent = cTop.parentNode;
  var cNext = cTop.nextSibling;
  cFieldset.appendChild(cTop);
  var cCount = 0;
  while (cNext) {
    if (cNext.tagName=="DIV") cCount++;
    cCopy = cNext;
    cNext = cNext.nextSibling;
    cFieldset.appendChild(cCopy);
  }
  cFieldset.className = "collapsible" + ((location.href.indexOf('#comment')==-1) ? " collapsed" : "");
  cLegend.innerHTML = "<?php print t('Comments') ?> ("+cCount+")";
  cParent.appendChild(cFieldset);
  if ("function" != typeof(window.isJsEnabled)) {
    document.write("<script type=\"text/javascript\" src=\"<?php print $base_path ?>misc/drupal.js\"><\/script>");
  }
  if ("function" != typeof(window.collapseAutoAttach)) {
    document.write("<script type=\"text/javascript\" src=\"<?php print $base_path ?>misc/collapse.js\"><\/script>");
  }
}
</script>

--
Geneticists from METU

--
ufku.com - IMCE - BUEditor

Excellent!

Posted by justin3 on December 5, 2006 at 10:12am

thanks ufku!

this should be part of the core... its a very worthwhile option.

i was actually looking for a variation of this. trying to figure out how to add an admin button to every comment, so a moderator could set troll comments to collapsed- so they're not completely deleted, but just minimized so as not to clutter up the discussion. then users could click to a javascript link to unfold the comments as needed.

Interesting idea

Posted by NicolasH on December 5, 2006 at 10:32am

Similar to the Digg approach of hiding "dugg down" comments below a chosen threshold minus the democracy. But it might be more appropriate for a smaller site...

ourbrisbane.com

Tried this in 5.x site and doesn't work. Any suggestions?

Posted by SomebodySysop on March 27, 2007 at 11:12pm

I tried putting this code into the page.tpl.php of a 5.1 site but it doesn't work. Any suggestions?

I'm looking for something similar to work with D5 ...

Posted by JohnG on April 21, 2007 at 2:56pm

... but rather than but the whole thread into one collapsible fieldset, I would like to make each comment collapsible ... so initially the comments appear like threaded list - collapsed, but each one can be 'opened' individually in context (not on a new page).

Any pointers welcome.

it works on D5 plus

Posted by turin on October 22, 2008 at 3:59pm

It works perfectly.

You just have to change the second line from

if (cTop = document.getElementById("comment")) {

if (cTop = document.getElementById("comments")) {

As the CSS id of the comments DIV is now "comments". And it works just fine :)

http://lindeas.com -- working on GNU/Linux ideas

Count Comments?

Posted by gbowman on October 7, 2009 at 9:56pm

By changing comment to comments (as above) this works for me, however the number in brackets does not count correctly, it just shows (0).

I tried using $count = comment_num_all($node->nid);print $count (from http://drupal.org/node/347726) which works on the single story page, but not for a page with multiple stories. I presume it doesn't know what nid it should be counting??

Any ideas?

Many Thanks
Graham

for 6.x

Posted by ufku on October 8, 2009 at 1:27am

Add the below code to your theme's script.js(create if not exists or somehow insert this code into your pages)

$(document).ready(function() {
  var $comments = $('#comments');
  if (!$comments.size()) return;
  var count = $comments.find('.comment').size();
  var label = Drupal.formatPlural(count, '1 comment', '@count comments');
  var $legend = $(document.createElement('legend')).html(label);
  var fsetclass = 'comments collapsible' + (location.href.search(/#(comment|new)/) == -1 ? ' collapsed' : '');
  var $fset = $(document.createElement('fieldset')).addClass(fsetclass);
  $fset.insertBefore($comments).append($legend).append($comments);
  Drupal.behaviors.collapse($fset.parent());
});

--
ufku.com - IMCE - BUEditor

Thanks for your suggested

Posted by gbowman on October 8, 2009 at 6:44pm

Thanks for your suggested script, this time it counts the comments correctly but doesn't show the comments when clicked, just appears as text with the lines either side as though it should be a collaspible fieldset.

IE is reporting Webpage error details

Message: Object doesn't support this property or method
Line: 670
Char: 3
Code: 0

Which refers to Drupal.behaviors.collapse($fset.parent());

Maybe the answer lies somewhere inbetween the two. Unfortunately I can't work out exactly what each one is doing to figure it out :(

I've suprised myself and

Posted by gbowman on October 8, 2009 at 7:43pm

I've suprised myself and managed to get a combination of the 2 to work. Here's what I ended up with

<script type="text/javascript">
if (cTop = document.getElementById("comments")) {
  var $comments = $('#comments');
  var count = $comments.find('.comment').size();
  var cFieldset = document.createElement("FIELDSET");
  var cLegend = document.createElement("LEGEND");
  cFieldset.appendChild(cLegend);
  var cParent = cTop.parentNode;
  var cNext = cTop.nextSibling;
  cFieldset.appendChild(cTop);
  cFieldset.className = "collapsible" + ((location.href.indexOf('#comment')==-1) ? " collapsed" : "");
  cLegend.innerHTML = "<?php print t('Comments') ?> ("+count+")";
  cParent.appendChild(cFieldset);
  if ("function" != typeof(window.isJsEnabled)) {
    document.write("<script type=\"text/javascript\" src=\"<?php print $base_path ?>misc/drupal.js\"><\/script>");
  }
  if ("function" != typeof(window.collapseAutoAttach)) {
    document.write("<script type=\"text/javascript\" src=\"<?php print $base_path ?>misc/collapse.js\"><\/script>");
  }
}
</script>

This is probably not the most efficient way of doing this but it works on my install!

collapse.js

Posted by ufku on October 9, 2009 at 11:17am

It requires misc/collapse.js to be included in the page.
You may add it using

<?php
 drupal_add_js('misc/collapse.js');
?>

in your node.tpl.php

--
ufku.com - IMCE - BUEditor

Ahh that did it! Much

Posted by gbowman on October 11, 2009 at 4:36pm

Ahh that did it! Much appreciated!

This solution works

Posted by tamasco on May 3, 2010 at 11:59am

This solution works perfectly. But I need to make individual comments collapsible. Is there a way to do this or modify the solution provided here to that effect?

Many thanks!
Tamasco

Similarity, is there a way of

Posted by garryi on May 4, 2010 at 8:22pm

Similarity, is there a way of showing 2 or 3 comments while all other comments are collapsed? And when clicking on 'expand' all other comments show. Can this be done?

Subscribing...

Posted by tamasco on May 7, 2010 at 5:20am

Subscribing...

Iterative Collapse

Posted by areynolds on April 1, 2011 at 6:44am

You should be able to figure out how to apply your collapse technique to every div with the class ".comment" by iterating through with .each(). Although I haven't done this, I did use code from this thread to collapse multiple #comments sections (I have a Q/A view that displays a question node with attached answer nodes; all of them can have #comments divs and I wanted to collapse all of them):

$(document).ready(function() {
  $( 'div[id^=comments]' ).each(function(index, comments) {
  	var $comments = $( comments );
  	if ($comments.length == 0) return;
  	var count = $comments.find('.comment').size();
  	var label = Drupal.formatPlural(count, '1 comment', '@count comments');
  	var $legend = $(document.createElement('legend')).html(label);
  	var fsetclass = 'comments collapsible' + (location.href.search(/#(comment|new)/) == -1 ? ' collapsed' : '');
  	var $fset = $(document.createElement('fieldset')).addClass(fsetclass);
  	$fset.insertBefore($comments).append($legend).append($comments);
  	Drupal.behaviors.collapse($fset.parent());
  });	
});

If you see anything wrong with this technique, please tell me. I haven't done browser testing yet, so I'll probably get boned by IE and have to revise using the other code.

great

Posted by alvinlb on April 8, 2011 at 12:18pm

I just started looking for this functionality yesterday.

The solution posted by Ufku (many thanks Ufku!) works great. The only problem I'm having is that the comments
are collapsed, but the comment form is expanded. When the user clicks to show comments, another comment form expands, so two comment forms show. I'm probably doing something wrong! Can anyone help?

In case I haven't explained myself very well, you can see what I mean here..

http://www.athenacontemporaryart.com/drupal/aroomwithaview

Thanks :-)

Drupal 7

Posted by gawi on June 10, 2011 at 6:04am

What is the solution for Drupal 7 ?

TIA

D7 version

Posted by ufku on June 30, 2011 at 9:27am

Put this code in your script.js

(function($) {$(function() {
  var $comments = $('#comments');
  if (!$comments.size()) return;
  var count = $comments.find('.comment').size();
  // if (!count) return; // Do nothing when there is no comment.
  var label = Drupal.formatPlural(count, '1 comment', '@count comments');
  var $legend = $(document.createElement('legend')).html('<span class="fieldset-legend">' + label + '</span>');
  var fsetclass = 'comments collapsible' + (location.href.search(/#(comment|new)/) == -1 ? ' collapsed' : '');
  var $fset = $(document.createElement('fieldset')).addClass(fsetclass);
  var $fsetwrap = $(document.createElement('div')).addClass('fieldset-wrapper');
  $fset.insertBefore($comments).append($legend).append($fsetwrap);
  $fsetwrap.append($comments);
  var attach = function() {Drupal.behaviors.collapse.attach($fset.parent(), Drupal.settings);};
  Drupal.behaviors.collapse ? attach() : $.getScript(Drupal.settings.basePath + 'misc/collapse.js', attach);
});})(jQuery);

Note that, yourtheme/script.js is no longer automatically loaded in d7. You need to manually add it to theme's info file.

scripts[] = script.js

--
ufku.com - IMCE - BUEditor

It works!

Posted by gawi on June 30, 2011 at 4:14pm

Oh my God! It works!

Thanks ufku, You're the best!

Thank you!

Posted by bollerfant on July 21, 2011 at 4:09pm

Thank you!

Hi, when using that script,

Posted by bollerfant on August 5, 2011 at 6:25pm

Hi,
when using that script, everything is fine until i log out. when i'm NOT logged in, i cannot expand the comments. do someone have a solution for this with this script here or another solution in form of a script/module ?

I have the opposite

Posted by earwax on January 27, 2012 at 5:11pm

When I am logged in, I cannot expand the comments. Using Drupal 7

I have kept the above code in

Posted by marriswetha on September 10, 2011 at 5:31am

I have kept the above code in my theme/script.js . still is not not working.

You need to manually add it

Posted by earwax on January 27, 2012 at 5:13pm

You need to manually add it to theme's info file.

scripts[] = script.js

it works for me but what

Posted by konsul on January 10, 2012 at 10:04am

it works for me but what would be the code for displaying all comments on pageload and just the "post new comment" area collapsed?

regards

Update

Posted by glesage on January 21, 2012 at 7:08pm

Hi,

I'd like to know if this still applies for latest D7 version (7.x-3.x?). I tried it and it only collapse some comments, but I am unable to expand them...?
Could anybody post the content on collapse.js just for me to check?

Thanks for the help.

collapse.js

Posted by earwax on January 27, 2012 at 5:16pm

(function ($) {

/**
 * Toggle the visibility of a fieldset using smooth animations.
 */
Drupal.toggleFieldset = function (fieldset) {
  var $fieldset = $(fieldset);
  if ($fieldset.is('.collapsed')) {
    var $content = $('> .fieldset-wrapper', fieldset).hide();
    $fieldset
      .removeClass('collapsed')
      .trigger({ type: 'collapsed', value: false })
      .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
    $content.slideDown({
      duration: 'fast',
      easing: 'linear',
      complete: function () {
        Drupal.collapseScrollIntoView(fieldset);
        fieldset.animating = false;
      },
      step: function () {
        // Scroll the fieldset into view.
        Drupal.collapseScrollIntoView(fieldset);
      }
    });
  }
  else {
    $fieldset.trigger({ type: 'collapsed', value: true });
    $('> .fieldset-wrapper', fieldset).slideUp('fast', function () {
      $fieldset
        .addClass('collapsed')
        .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
      fieldset.animating = false;
    });
  }
};

/**
 * Scroll a given fieldset into view as much as possible.
 */
Drupal.collapseScrollIntoView = function (node) {
  var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
  var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
  var posY = $(node).offset().top;
  var fudge = 55;
  if (posY + node.offsetHeight + fudge > h + offset) {
    if (node.offsetHeight > h) {
      window.scrollTo(0, posY);
    }
    else {
      window.scrollTo(0, posY + node.offsetHeight - h + fudge);
    }
  }
};
/**
 * Scroll a given fieldset into view as much as possible.
 */
Drupal.collapseScrollIntoView = function (node) {
  var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
  var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
  var posY = $(node).offset().top;
  var fudge = 55;
  if (posY + node.offsetHeight + fudge > h + offset) {
    if (node.offsetHeight > h) {
      window.scrollTo(0, posY);
    }
    else {
      window.scrollTo(0, posY + node.offsetHeight - h + fudge);
    }
  }
};

Drupal.behaviors.collapse = {
  attach: function (context, settings) {
    $('fieldset.collapsible', context).once('collapse', function () {
      var $fieldset = $(this);
      // Expand fieldset if there are errors inside, or if it contains an
      // element that is targeted by the uri fragment identifier.
      var anchor = location.hash && location.hash != '#' ? ', ' + location.hash : '';
      if ($('.error' + anchor, $fieldset).length) {
        $fieldset.removeClass('collapsed');
      }

      var summary = $('<span class="summary"></span>');
      $fieldset.
        bind('summaryUpdated', function () {
          var text = $.trim($fieldset.drupalGetSummary());
          summary.html(text ? ' (' + text + ')' : '');
        })
        .trigger('summaryUpdated');

      // Turn the legend into a clickable link, but retain span.fieldset-legend
      // for CSS positioning.
      var $legend = $('> legend .fieldset-legend', this);

      $('<span class="fieldset-legend-prefix element-invisible"></span>')
        .append($fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
        .prependTo($legend)
        .after(' ');

      // .wrapInner() does not retain bound events.
      var $link = $('<a class="fieldset-title" href="#"></a>')
        .prepend($legend.contents())
        .appendTo($legend)
        .click(function () {
          var fieldset = $fieldset.get(0);
          // Don't animate multiple times.
          if (!fieldset.animating) {
            fieldset.animating = true;
            Drupal.toggleFieldset(fieldset);
          }
          return false;
        });

      $legend.append(summary);
    });
  }
};

})(jQuery);

Good luck. We are all counting on you!

I have tried all of these

Posted by cesar.brod@gmail.com on February 4, 2012 at 3:57pm

I have tried all of these approaches on this thread on D7 and none of them worked. I also have looked for this functionality in a module but I am not able to find it.

I gave up on this happening

Posted by earwax on February 10, 2012 at 6:26am

I gave up on this happening in the drupal way. I think the only way I am going to fix this problem is to go into my theme file and hack it up pure PHP/javascript/HTML style.