Add Show and Hide Comments Blogger with the Onclick Event

Adding Show and Hide Comments Blogger with Onclick Event - Again Arlina Design shared a blog tutorial after discussing How to Install Responsive Floating Ads with the Close Button yesterday. This time Arlina Design will share how to add the show and hide functions to the blogger comments area by utilizing event onclick attributes.

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

Let's look at the way as follows:

Show and Hide Comments Blogger with Onclick Event

1. Open Blogger> Template editor> Search markup for this comment:

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

Note: Usually there are two markups as above

Change (second) the above code 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. Add the code below before ]]></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 </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.

That's a simple tutorial on how to Add Show and Hide Comments Blogger with the Onclick Event. If there are difficulties, please ask via the comments column, thank you.