Adding Comments Show and Hide Blogger with onclick Event

Adding Comments Show and Hide Blogger with onclick event- Tech blog is sharing a tutorial blog post about how to add functions show and hide into the comment area blogger by using the onclick attribute event.

The purpose of adding this function is to ease loading(onload)in the blog post page if your blog posts there have been many comments in it. The workings of this script is quite simple: content comment will remain closed before opening full comment area by pressing a button will show and hide that I share this.

Let us consider the following way:

Show and Hide Comments Blogger with onclick Event

1. Go to Blogger Template Editor Search markup this comment:

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

Note: There are usually two markup as above

Change (second) in 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 following code 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 following code before the </ 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. Lastly, save the template.

Thus a simple tutorial on how to add Show and Hide Comments Blogger with onclick event. If there is difficulty please ask through the comments column, thank you.