Displaying comments in compact form

Drupal provides options to display comments in a variety of fashions. In this recipe, we will look to provide an alternate representation by compacting the display of a node's list of comments using jQuery.

Getting ready

We will be using the myzen theme created earlier in this book as the example theme in this recipe. Since we are looking to theme the display of comments, it is assumed that the comment module is enabled and that sample comments are available for testing purposes.

How to do it...

The following steps are to be performed inside the myzen theme folder at sites/all/themes/myzen.

1. Browse into the js sub-folder.

2. Create a JavaScript file named comment.js and open it in an editor.

3. Add the following JavaScript to this file:

   Drupal.behaviors.myzenComments = function (context) {
   $('#comments h3.title')
   .click(function() {
   // Display all siblings in animated fashion.
   $(this).siblings().show('fast');
   })
   .siblings();
   .hide();
   }
   

4. Save the file and exit the editor...