Collapse and expand individual Blogger comments hack

When a post has many comments, reading them, keeping track what's read and following threads of conversation may be difficult. After making the threaded comments hack, I was thinking if one could make the texts of all comments collapse, so that the "flow" of conversation could be seen, it would make easier to follow conversation and find/navigate to particular comments. User could also expand the texts of all comments, and collapse/expand single comment's text.

A hack that would do those things was not found ready. So I had to code one myself (well I probably would have done it anyway). I first did it to use "pure" javascript and div show/hide, but then I made an option to use jQuery and smooth transitions, which in the end looks really great. But you can choose to opt out the jQuery, if you want, it still works.

Before installing this hack you need to install my Highlight author comments hack. We use those comment wrapping div:s created in that hack.

Open template html for editing. Click Expand Widget Templates. Insert this code before </head> (leave out first line if you don't want jquery):

Data provided by Pastebin.com - Download Raw

After inserting that code, find lines:

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

After those lines add:

Data provided by Pastebin.com - Download Raw

Next line contains <H4>. Change that <H4> to:

<h4 style='width: 50%;'>

Find lines (added in Highlight author comments hack):

              &lt;div class=&#39;admin-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
            <b:else/>
              &lt;div class=&#39;normal-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;

Replace those lines with:

Data provided by Pastebin.com - Download Raw

Save template. Now the hack already works, you can test it.

But let's add some visual clue when mouse cursor is over a comment so user is encouraged to click it to hide/show comment's text. I made that by adding hover effects to comment wrappers. I also styled the normal-comment spacing to be same as admin-comment's.

Open Template Designer. Select Advanced, Add CSS. Find the CSS you added in Highlight author comments hack, something like this:

.admin-comment {
background: #F4F4F4;
margin-top: 6px;
margin-bottom: 6px;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED;
}

(you can do this also in tempate html editing mode, if you know what you're doing)

Replace that with:

.admin-comment {
background: #F4F4F4;
margin: 4px 4px 4px 0;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED; 
}
.admin-comment:hover {
background: #EDEDFF;
border: 1px solid #D0D0FF; 
}
.normal-comment {
margin-right: 4px;
padding: 3px 3px 0 3px;
border: 1px solid #FFFFFF;
}
.normal-comment:hover {
background: #F8F8FF;
border: 1px solid #EDEDFF; 
padding: 3px 3px 0 3px;
}
.comment-footer { margin-bottom: 4px; }

I also fine tuned margins in this CSS a bit. You may want to adjust color details etc. according to your blog styles. I have again installed this hack on this blog, so you can see it in action, for example here. Although not necessary for this hack to work, I recommend you to install also my threaded comments hack.

Option: comments closed initially

If you want the comments to be closed when the post is opened, edit html and put this before </body>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
  hideComments();
</script>
</b:if>