How to add show and hide button in Blogger comment section?

How to Make Comments Become Show Hide on Blogger - On this occasion Blogism will share a tutorial on How to Make a Show Hide Comment Button on Blogger or you could say making a close and open button in the comments section of Blogger so that our blogger's blog loading becomes fast.

Actually, to add the Show and Hide Comment Button on Blogger, there are many benefits, starting from making blog loading fast because the image in the comments can slow down the loading of the blog, the two blog views are better, third if the comments are too many it will be easier and more efficient.

How to add open and close comments button in blogger comment form?

1. Login to your Blogger account

2. Go to dashboard and Select Theme

3. Click on Edit HTML

4. Press Ctrl + F

5. Find the code <div class='comments' id='comments'>

Info: usually there are two codes like the one above,
you have to replace the two codes with the code below.

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a><div class='clear'/>
<div class='comments hide-content' id='comments'><a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a><div class='clear'/>

6. Add below css code before the  ]]></b:skin>or </style>rather put the code on it

/*BlogismPro Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#43ce8e;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#43ce8e;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

7. Then add the code above the </body>

<script type='text/javascript'>
//<![CDATA[
// Blogismpro Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

Finally click on save theme button and visit your blog posts and goto comment area,you will see that button,if you have anay issue to implement this then comment below and also tell if you like this article and share with your another blogger freinds.Thanks for reading.