How to Make Show and Hide Comment with Onclick event in Blogger

How to Make Show and Hide Comment with Onclick event in Blogger - Hiding the comment view is one way to narrow the height of the post page so that the page loads faster. How to create a show comment command can be done in various ways. One of them with onclick event. In this blog tutorial, I will try to discuss about how to create show comment (show comment) with oncilick event trick. This method can actually be applied to any comment. Be it Blogger's default comments, Disqus and Facebook comments.

The purpose of adding this function is to lighten the loading (onload) blog post on the page if the posting of your blog especially that there are many comments in it. The workings of this script is quite simple ie the comment content will remain closed before you open the comment area by pressing the show and hide button which I will share this.

If you are interested, can directly follow step by step below:

How to Make Show and Hide Comment with Onclick event in Blogger

1. Go to Blogger Dashboard, then Select Template Editor menu, then Find the following code:

<div class='comments' id='comments'>

Note: There are usually two codes similar to the one above

Replace both the code above 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'/>

2. Then Add the code below before the code ]]></b:skin> or </style>

/* 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:#5593f0;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:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

3. Add the code below before the code  </body>

<script type='text/javascript'>
//<![CDATA[
// 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>

4. Finally, save the template

Read: How to Put Show Hide Comments On HTML AMP Blogs

Similarly tips on how to create a show and hide comment with Onclick Event on Blog. Hopefully with a short enough article this can help you and can be useful. Good luck and thank you.

Share :