By bhatian on

In Drupal 7, the "Add New Comment" section seems to be fully visible all the time, which I feel is too distracting for people simply reading the main content. Is there any way to collapse this section by default or turn it into a link which expands when clicked (like in Drupal 6)?

Thanks.
Naresh

⋅ Categories: Drupal 7.x

Comments

sammyframson’s picture

sammyframson commented

I second this request. Does anyone know how?

mkoistinen’s picture

mkoistinen commented

Fortunately, this can be done entirely within your CSS and JS for your theme in a manner that should gracefully degrade to the existing functionality now for browsers who have Javascript turned off.

In your theme's CSS do something like this:

.js #comments h2.title.comment-form {
  padding-left: 20px;
  background: url('../images/open-close-sprite.gif') 0 -3px no-repeat;
}
.js #comments h2.title.comment-form.open {
  background-position: 0 -43px;
}
.js #comments h2.title.comment-form.transition {  /* This rule must come after .open */
  background-position: 0 -23px;
}
.js #comments h2.title.comment-form:hover {
  text-decoration: underline;
  cursor: pointer;
  cursor: hand; /* For IE */
}

The '.js' in the front of the selectors makes these changes ineffective for users who have javascript turned off, so they'll just see what they see now, so they can still post as normal. The sprite I'm using is here: http://goo.gl/nNvH4, just drop it into your theme's images folder. (If this link is no longer valid, its just a gif that has 3 triangles in a sprite. The first is pointing to the right, the middle points 45° down to the right and the 3rd points down. The triangles are equilateral and about 10px on a side, and they're spaced about 20px apart down the sprite. The image itself is 14x60px)

Then, In your theme's Javascript, do this:

(function($) {

  // This jQuery function is called when the document is ready
  $(function() {
    // Hurry up and hide the comment form, if present.  In most browsers, this 
    //    will be done before the page is fully drawn, so you shouldn't see a flash 
    //    of the form before it disappears.
    $('#comments form.comment-form').hide();

    // The "Add New Comment" heading will be turned into a toggle to 
    //     open/close the comments
    $('h2.title.comment-form').addClass('closed').bind('click', function() {
      var $self = $(this),
          $form = $self.siblings('form.comment-form'),
          speed = 250; // speed of animation, change to suit, larger = slower
  
      if ($self.hasClass('open')) {
        $self.addClass('transition').removeClass('open');
        $form.hide(speed, function() {
          $self.addClass('closed').removeClass('transition');
        });
      }
      else {
        $self.addClass('transition').removeClass('closed');
        $form.show(speed, function() {
          $self.addClass('open').removeClass('transition');
        });
      }
    });
  });     
})(jQuery);

This works great for me in virtually all browsers that are supported by jQuery itself. However, please do test in your environment.

sammyframson’s picture

sammyframson commented

Thank you for the info. I will try this.

Anonymous’s picture

Anonymous (not verified) commented

i've created a script.js file and added "scripts[] = script.js" into my theme.info file. then i've added the css code to my style.css but it doesn't work. everything that happens is that the commentform disappears.

any ideas how to fix that?

regards

Ramonius’s picture

Ramonius commented

Have you tried mentioning the .js file in your html.tpl.php?

minneapolisdan’s picture

minneapolisdan commented

Thanks for the detailed explanation. Unfortunately, this code doesn't seem to work. For starters, there is a line to "hide" the form, but no line to "show" it? I'll post what find once I figure this out.

Dan Moriarty
Creative Director and CEO, Electric Citizen
Twitter: @minneapolisdan

minneapolisdan’s picture

minneapolisdan commented

This is the code I ended up using for my site:

 (function($) {

  // This jQuery function is called when the document is ready
  $(function() {


     $('#comments h2.pane-title').click(function() {
        $('form.comment-form').toggle('slow', function() {
          // Animation complete.
        });
        
        //add css class to H2 title when clicked//
        $(this).toggleClass("open");

      });
  });
  
})(jQuery);

Dan Moriarty
Creative Director and CEO, Electric Citizen
Twitter: @minneapolisdan

mathieso’s picture

mathieso commented

Thanks!

Small changes, to hide the form initially, and to work without panes.

 (function($) {
  // This jQuery function is called when the document is ready
  $(function() {
     $('form.comment-form').hide();
     $('#comments h2.comment-form').click(function() {
        $('form.comment-form').toggle('slow', function() {
          // Animation complete.
        });
        //add css class to H2 title when clicked//
        $(this).toggleClass("open");
      });
  });
})(jQuery);
boronali’s picture

boronali commented

Hi, forgive me 'cose i'm a total Drupal newbie :

I'd like to use this trick to make the comment form foldable. I get the point concerning the css lines but where do I find my theme's javascript file to put the .js lines ?

I'm using Drupal 7 and Bartik as theme.

Thanks for the help !

ravis’s picture

ravis commented

just create a new .js file and call it in Bartik.info file.

You need to add a line something like this:

scripts[] = custom.js

I work at Drupar.com

Anonymous’s picture

Anonymous (not verified) commented

i'm using http://drupal.org/project/inline_comments, panels and views instead of core stuff!

JohnMorris’s picture

JohnMorris commented

OK, finally I am looking at moving to Drupal 7. Been on board since 2008, and have two active blogs. I recommend Drupal over Wordpress and Joomla. And now I'm exploring the updates for D7. Looks like some nice stuff. But the "Add New Comment" problem -- which has now cost me a "few" minutes to clarify -- is ridiculous. I'm not going to do any coding to fix what should be a check box. Coding requires maintenance. So when you add (a) the people who might like to use Drupal but who aren't coders and (b) the cost to maintaining multiple coded situations once the whole thing is upgraded module by module even if you can code, the cost is quite high. So from an economic perspective, higher cost just equals loss of market share.

And why is it exactly that the perfectly fine functionality in V6 was removed here? We have an incorrect set of options which does not include an "option to make a comment if you want" - rather as the original author here has pointed out, you have a "demand" to make a comment, with a full form and open fields. Wasting space, and taking brain power for the reader to decide "no, I guess I don't really have to fill this out". Maybe some people want that behaviour, but I doubt it. I'd rather be in control myself.

Here's my objective:

1) Allow comments to be seen.
2) Allow authenticated users to add and edit comments, at their discretion.
3) Present the comment dialogue only when asked. (This is the part that as far as I can tell, is missing, without coding.)

Simple and clean, general what Drupal has delivered and in V7 seems to be delivering, except here.

Thanks to anyone who might consider this question. Really, building simple clean, but powerful websites requires attention to detail, and this little detail has escaped the community so far.

Keep up the good work though!

John

JohnMorris’s picture

JohnMorris commented

http://drupal.org/project/nicecomments

This seems to be a solution! Thanks Boldizsár Bednárik! http://drupal.org/user/89652

JohnMorris’s picture

JohnMorris commented

Maybe Boldizsar you might be able to check this. When adding multiple nested comment on an original blog posting, there is a "Add new comment" tag immediately under the original top post. This field does not work. It goes nowhere. However, all the subsequent comments have a "reply" field, which works. And then at the bottom, there is your collapsed from. So, it kind of works, except for the item at the top, which might frustrate someone. I am logged in with full permissions.