How To Expand/Collapse Blogger Comments

Do you like to show and hide your blogger comments?If your blog have large number of comments this will very helpful to you.Because if there are many more comments in your blogger posts, your blog post can be very long.This will be a interrupt to your readers.So if you like add this trick to your blogspot blog,then folow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see </head> tag .

4.Copy below code and paste it just before the </head> tag .

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Comments";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Comments";
}
}
</script>

5.Now find below code block:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>
        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
          <b:if cond='data:comment.favicon'>
            <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
          </b:if>
          <a expr:name='data:comment.anchorName'/>
          <b:if cond='data:blog.enabledCommentProfileImages'>
            <data:comment.authorAvatarImage/>
          </b:if>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
          <data:commentPostedByMsg/>
        </dt>
        <dd class='comment-body'>
          <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'><data:comment.body/></span>
          <b:else/>
            <p><data:comment.body/></p>
          </b:if>
        </dd>
        <dd class='comment-footer'>
          <span class='comment-timestamp'>
            <a expr:href='data:comment.url' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd>
      </b:loop>

</dl>

Note : Blue colored code can be different.Specially consider the Green color code.
( <dl expr:class='data:post.avatarIndentClass' id='comments-block'> and </dl> )

6.Now Replace above code with below code :

<a href='javascript:toggle();' id='displayText'>Show/Hide Comments</a>

<div id='toggleText' style='display: none;'>


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
 <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
 </b:if>
 <a expr:name='data:comment.anchorName'/>
 <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
 </b:if>
 <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
   <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
 <b:else/>
   <p><data:comment.body/></p>
 </b:if>
</dd>
<dd class='comment-footer'>
 <span class='comment-timestamp'>
   <a expr:href='data:comment.url' title='comment permalink'>
     <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
 </span>
</dd>
</b:loop>

</dl>


</div>

7.Now save your template and you are done.