By coolo on

Thanks in advance for any insights into this...

What I'd like to do is, under the teaser for my node, have a link to an expandable/contractable "comments section". The comments section would have the X most recent comments and a comments posting form (preferrable ajax comments, but not 100% necessary).

Is this doable. I have been searching around and found ways to put the comments under the teaser, but not how to make it expandable/contractable, and doesn't have the comment post form. Anyone have any ideas?

⋅ Categories: Drupal 6.x

Comments

WorldFallz’s picture

WorldFallz commented

You could probably do this by creating a view for the node comments, adding it to the content type with views_attach, and then using a bit of jquery to add the expand/collapse behavior.

EDIT:
The more I think about it, you could probably do it with the default comment display + some jquery.

coolo’s picture

coolo commented

Thank you for the reply. I will look into jquery to see if I can come up with something.

Does anyone know if there is anything that is already put together like this?

Edit:
Or does anyone have any options that are more specific. All help/suggestions are welcome. Thanks again.

WorldFallz’s picture

WorldFallz commented

I haven't seen an existing module for this.

To go the views route, probably the easiest method:

  1. create a page view where you want this listing to appear.
  2. set it with row style of "node", then select teaser format, and click the "display comments" option
  3. set any other options as desired.
  4. you'll need to add something like the following to your theme:
    $("#item_to_click_to_toggle_comments").click(function () {
   $("#comments").slideToggle("slow");
});

I couldn't find anything obvious to hook onto for the "click" event to toggle the comments so you'll probably have to theme the view to add a link in there -- then replace "item_to_click_to_toggle_comments" with the id of the item you add.

To add the comment form you could probably use http://drupal.org/project/formblock.

coolo’s picture

coolo commented

Thank you so much for your suggestion. I think this is going to give me a good start.

A follow up question considering I'm using contemplate module for this node type:
Can I create an item (div with a link in it) in contemplate to use as a trigger for the click event?

Or, can I put the jquery code you suggested directly into the contemplate along with a trigger link?

WorldFallz’s picture

WorldFallz commented

I would think you could add the following to teasers via contemplate:

<a id="comment_click" href="#">View Comments</a>

Then use "#comment_click" in the jquery statement.

coolo’s picture

coolo commented

So after mulling over WorldFallz's comments (thanks again!), and reading and trying all sorts of things, I've gotten pretty close to what I want to do. In the node.tpl.php file, I added some jquery with a "View Comments" link that when clicked upon toggles a div containing

<?php print comment_render($node) ?>

The javascript is located in an external named toggle.js and is called via the drupal_add_js () function placed within the node.tpl.php file.

The jquery I'm using is based on the example from the following page, except I've changed the effect from toggle to slideToggle.
http://mydrupalblog.lhmdesign.com/drupal-theming-jquery-basics-inc-drupa...

Everything is working as I would like except that only the first Teaser on each page toggles. Any text/links I add to node.tpl.php show up appropriately under each teaser. But only the first teaser toggles. The rest mock me and bring me to the top of the page when the "View Comments" link is clicked.

If anyone has any ideas, or would like me to post some additional info, please let me know. Thanks again.

Ole Martin’s picture

Ole Martin commented

I moved this code 

php if ($ submitted):?> 
   <div class="submitted"> php print $ submitted;?> </ div> 
   php endif;?>

under the code of 

<div class="content"> 
       php echo $ content;?> 
     </ div>

in Node.tpl.php . And it worked fine for my usage, but I don't know if this helps you, but maybe others can use it

coolo’s picture

coolo commented

Here is what I did...

In my theme folder I created a file called script.js and put the following in it:

//togg

Drupal.behaviors.togg = function (context) {



var elementcount = $('#content').children().size() ;

elementcount = elementcount + elementcount;

var loopcount = 0;

var divcount = -1;



$('a#togg-link:not(.togg-processed)', context).addClass('togg-processed').each(function () {



while (loopcount < elementcount){

loopcount = loopcount + 2;

divcount = divcount + 2;



$('a#togg-link').attr('id', loopcount);

$('div#togg1').attr('id', divcount);

//close while loop

};



$('div.comments').hide().end();



$('a.lainks').click(function() {

var whatisthis = $(this).attr('id');

whatisthis = whatisthis - 1;

var dynamicid = "div#";

dynamicid += whatisthis;

$(dynamicid).slideToggle("slow");

return false;

//close .click(function()

});



//close process line

});

// close function (context)

};

Then, in my node.tpl.php file, I added the following after the div with class "content":

<a href="#" class="lainks" id="togg-link">

<?php print "View " . $comment_count . " Comments";?>

</a>



<div class="comments" id="togg1">

<?php 

if ($comment_count > 0){

print "<b>Comments</b>";

}



print comment_render($node);

print "<hr>";?>

</div>

Though you can remove the if (comment_count > 0) statement and the print horizontal rule statement if that is not the style that you want for your page...

That's all you have to do as long as you have a div with id="content" in your page.tpl.php file in your theme folder (you should, but you might want to check just in case you changed something.

The remaining issue that I have is that using the comment_render($node) function has messed up my paging but I saw that there is a fix for that somewhere. Now to search for it again and see if I can get everything working.

Also, I want to throw out the caveat that I am an extreme novice at coding, especially javascript. So if anyone has a better way, please feel free to chime in. But this solution works for me (except the paging as noted earlier).

expand comments toggle comments on home page

bharathiraja’s picture

bharathiraja commented

Hi! guys, This article was very nice and help full
coolo, did you tell me how you put the comments under the teaser on every content please.