BLOGGER COMMENTS: SHOW & HIDE WITH ONCLICK EVENT

How to make Blogger's comment with show and hide button? Well this is it, plus this modification includes onclick event for blogger comment form. The purpose of adding this function is to reduces page's loading with (onload) feature 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 pal comment area by pressing a button will show and hide.


Find this markup inside your Blogger's template, usually there is more than one markup like this:

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

HTML: ONCLICK COMMENTS MODS

1. Change (Second markup) with this:

<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'/>

CSS: ONCLICK COMMENTS MODS

2. Add this 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;}

JAVASCRIPT: ONCLICK COMMENTS MODS

3. Finally, add this code before </body> tag:

<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. Finish.. have fun!