June 21, 2012

Expand/Collapse Blogger comment Box with jQuery


expand/collapse blogger comment boxBlogger comment form is the only section in blogspot blogs that still irritates users a lot.  After a successful customization of this form last year we now took a step even further to integrate jQuery slideToggle and accordion effect into it. Luckily major browsers now do support JavaScript library so this widget is compatible with all browsers. The tutorial today will help you to create a beautiful expandable and collapsible huge button that will display comment form by sliding down smoothly when triggered and hide it when clicked again. We will be using simple jquery functions to enable a button to  show/hide all div sections that hold the comments box.

Kindly also check out previous tutorials below to add even more fun.

Blogger Comment Box Series
4. Expand/Contract Blogger comment Box with jQuery

How it works?

This idea came in my mind by reading an interesting discussion between some fellows at stackoverflow. The discussion was a little confusing at first but a little focus made it to this structured code.  All this functionality does is that it hides the div sections in active mode but displays the content when clicked. You can see a live demo by clicking our comment box .

collapsible comment box

Credits

The codes below are copyrights of MBT blog. We therefore request both bloggers and developers to kindly attach an attribution link back to this page if they wish to share this tutorial with their readers.

Note: Most of our gadgets are redistributed with no credits attached. All such blogs are being repeatedly reported to both AdSense, Blogger and DMCA. Some readers are therefore advised to kindly use our resources only for non-commercial use only.

Install on blogger

The installation guide is extremely simple. We have kept the steps as clear as possible. You just need to copy and paste the codes as guided. Lets get to work now.

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Click Expand Widget Templates
  6. Just below <head> paste the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>

      7.  Now search for ]]></b:skin>   and just above it paste the following CSS code

/*----- Comment Box by www.MybloggerTricks.com ----*/

h3.trigger {
background: url(http://4.bp.blogspot.com/-w6rbdy4LCtI/UKdcV7jX1aI/AAAAAAAAIAw/ekWT8oI7JZw/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}

h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

  • To change the width of the button just edit: 518px
  • To change the color, font size, font type of the text "Click here to add Comment" edit the highlighted part of the code.

       8.    Next search this:

<b:includable id='comment-form' var='post'>

       9.   Just below it paste the following code:

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

and just above </b:includable> paste this code:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>

</div>
</div>

 

See the image below to see you have followed the steps correctly.

changing the comment form

    10. Save your template and all done!

You can customize the comment form by reading our previous tutorials. You can choose over one thousand background themes to breath a new life in the same commenting system that once looked really dull and simple.

Visit your blog to see your blog in completely different neat look. Your visitors will love to comment now! :)

Need help?

If you needed any help just let me know. I just hope this new tweak proves useful for most of you. I would love to hear your thoughts on this latest widget.  Do not forget to share it! :) Take good care of yourselves and your loved ones. Peace and blessings pals.





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

116 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. First to Comment Again :)
    I deserve an Award for this :P

    It is AWESOME !
    I just saw it today .....

    ReplyDelete
  2. i'm waiting for this tutorial..
    haha..

    Nice Post...

    JayRyan'sBlog was inviting you to be a Guest Post Author..

    Thank you so much.

    -jayryan09-

    ReplyDelete
  3. yeah...nice post...and thanks for interlinking with others..this helps alot...:D

    YouTube Widget
    Regards,
    ProBloggers

    ReplyDelete
  4. Very nice tutorial bro. But i was studying on this script from 2 days n you posted it earlier than me. . I am also studying this from stackoverflow. Please don't mind when i post this tutorial with attribution of stackoverflow.


    How To Get Genuine Adsense Approval

    ReplyDelete
  5. Bro, for your reference i was already working on this code. .

    $(document).ready(function(){
    $(".togglebox").hide();
    $("h2").click(function(){
    $(this).next(".togglebox").slideToggle("slow");
    return true;
    });
    });

    ReplyDelete
  6. Brother it is possible to move and set above first comment? it will be look better and easy. am right? I Know you can.

    ReplyDelete
  7. Brother it is possible to move and set above first comment? it will be look better and easy and need easy color Customization.

    Thanks

    ReplyDelete
  8. nice tutor.. thanks for sharing..
    Instead of black background can we use other colors background?

    Regards
    Technology Blog

    ReplyDelete
  9. Thanks its amazing and its unique thing to every blogger. Nice post keep posting new articles
    Stylish Blogger Threaded Comments With Author Comments

    ReplyDelete
  10. nice work bro keep it up its a really nice tutorial : offshore hosting

    ReplyDelete
  11. Yeah i was waiting for this post :)

    thanks bro successfully added on my blog http://nannu4u.blogspot.com/

    ReplyDelete
  12. I feel really nice reading these articles I mean there are writers that can write good material.
    Web Development

    ReplyDelete
  13. After following your instructions and implementing the same in my blog. When I save my template, blogger prompts me with the following error code:

    Error code: bX-to3x02,

    What could be the problem?

    ReplyDelete
  14. woahoo cool but mustafa please provide a tutorial for making it look like the one you have in your blog!

    1:Copying Blogger Widgets

    2:Dota2 Invite Giveaway

    ReplyDelete
  15. i am only getting the text , no button Plz help

    ReplyDelete
  16. Thank you so much Sir, I have added this with my facebook social plug-in comments :)

    ReplyDelete
  17. @haider

    You surely deserve an applause always young champ. :p


    @Hamxa
    Its a button with text on foreground. Its clickable pal :)

    @vijay

    If you understood the discussion out there and created your own code then sure you deserve all the credit. Proud of you :)

    @si

    Yes dear you can do that but I wont advise that you move the entire iframe box. Instead you can simply use this image :

    http://mybloggertricks.googlecode.com/files/comment-boxbg.png

    and link it to #comments. Place this image at the top so that when visitors click it they will be brought straight down towards the Expandable box. Try it and let me know :)

    @Felix


    If blogger is giving error then instead of using the code in step#6 please paste this code instead just below <head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script src='http://mybloggertricks.googlecode.com/files/expandablecomments.js' type='text/javascript'/>

    @meesum

    You can follow the tutorial series to create an exact same customized comment box :)

    @tanmay

    Check if you have paste the CSS styles in step#7 correctly

    @prime
    congtax pal! :d










    ReplyDelete
  18. Dear sir it is not working. In fact the original comment tag is not working in my present blog. I have tried lots of templates but could not succeed. In my dummy blog it appears. Once i have converted my blog into three coloumn and from then onwards the comment tag is not visible. If you kindly help me out than i shall remain grateful to you. Thanks. My blog url is http://parthasarathi108.blogspot.com

    ReplyDelete
  19. Thanks :)

    Added to facebook comments

    Looking so good on my blog after making some minor changes to CSS code and image.

    ReplyDelete
  20. How to disable anonymous comments but allow people to still write in "Name/URL"? That feature is missing in Blogger.

    JayRyan'sBlog

    ReplyDelete
  21. Plz help i am getting this error :

    "b:includable" must be terminated by the matching end-tag "".

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Plzz i request u bro :*(

    Just coz i am an indian it doesnt mean u start ignoring us

    ReplyDelete
  24. it is not working in my blog...i lost 2 hours for this. is there any better way to do it

    ReplyDelete
  25. Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!

    cleveland web development

    ReplyDelete
  26. please how can i create a comment box like your comment box

    ReplyDelete
  27. hi every body ...
    i am very interesting with your comment box .
    how can i create this for my website
    plz help me

    ReplyDelete
  28. thanks.....................


    FOR entertainment follow :http://laugher28.blogspot.in/

    ReplyDelete
  29. h3. tag is not SEO friendly muhammad h2. tag use nahi ho rha ,,kia kru iska?

    ReplyDelete
  30. Plz help i am getting this error :

    "b:includable" must be terminated by the matching end-tag "".

    ReplyDelete

  31. learn video marketing

    http://www.guntalielman.com/learnvideomarketing


    ReplyDelete
  32. learn video marketing: http://www.guntalielman.com/learnvideomarketing

    ReplyDelete
  33. learn video marketing


    my URL is: http://www.guntalielman.com/learnvideomarketing



    ReplyDelete
  34. "learn video marketing
    http://www.guntalielman.com/learnvideomarketing" thank you, i like this

    pandora charms

    ReplyDelete
  35. Thanks a lot for this article.. Dear i apply this on my blogspot but some problem is coming in my blogspot and not working 100%,
    Kindly visit my blog(www.creativitymindideas.blogspot.com) and click on any post title and come in the bottom of page then you see problem box "Click here to add comment" is going out and text is on side. plz tell me how can i fix that problem.

    ReplyDelete
  36. didn't worked :( please help www.dstuffs.co.cc

    ReplyDelete
  37. I made My Site Like yours but i have some problems in the comment sections :(

    regards
    http://myblogginglab.blogspot.com

    ReplyDelete
  38. Well im a trader how can i can make blogspot for all new traders and investers...can i have the blogspot for stock queries from new persons how can they add my link because im forex tarder that makes easy to invest on online and get share money soon....
    Online forex trading
    http://www.forexbulls.com

    ReplyDelete
  39. Can YOu Add This To my Blog ??? Email Me IF YOu Can... Plzzz

    ReplyDelete
  40. By making your tweets interesting, you make our job easier by leaps and bounds. We ensure a steady stream of Twitter followers on your account in a specified period of time. Most people, who aim to increase their Twitter fan following, buy followers from companies or sellers. You can buy Twitter followers from us, but we assure you they are real people with real Twitter profiles. The real followers will not only 'follow' you on Twitter, they will comment on your tweets and interact with you. Avail our services and see the earnings go up like never before.

    buy twitter followers

    ReplyDelete
  41. I was looking for something like this for sometime ..

    I actuallly want to use Disqus for commenting .. will try .. if expand-collapse style would be possible even while using discus ..


    Mandy Sheen

    ReplyDelete
  42. thanks for this post, how do I get this into the container, it seem to only sit at the bottom without getting in like yours, u can have a look by http://blueblockng.blogspot.com/2012/10/stolen-oil-stolen-revenue_8538.html

    ReplyDelete
  43. its not working for me i am using chromgt template
    can u plzzzz help me out wht to do

    ReplyDelete
  44. It shows that ; is missing. I am using blogger simple template. Please tell me how can i solve the problem. Here is blog http://freelancingtutorials.blogspot.com/

    ReplyDelete
  45. Thanks Mustafa!
    nice blog & very good post.Its really helpful for me,

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. Hello,i used your site too many times and it helped me so much that i'm here to say thanks. now,I'm stuck with back-links, i am building so many back-links these days and Google still saying i have 0 back-links!Can you help me with that , please try to help me.

    This is my website , Download latest bluray hd movies and music videos in 720p and 1080p from mediafire and torrents free

    ReplyDelete
  48. Tank you soo much admin!! just love your blog :)
    Check my site www.theepiblogs.blogspot.com and tell me if i can improve it :)

    ReplyDelete
  49. hey mohammad thnk you so much for all your helps but this time your code dint work out for me. it works well for old posts but nt for the new ones.
    the comment box doesnt expand on clicking.. plz help, m loosing my valuable comments...

    ReplyDelete
  50. my old links- http://theepiblogs.blogspot.in/2012/11/best-android-smart-phone-rs10000-rs.html

    my new link- http://theepiblogs.blogspot.in/2012/11/i-am-alive-game.html

    the comment box doesnt work in my new posts.. plz help

    ReplyDelete
  51. It didn't worked properly.. but now comment form for the post "Next Android OS after Jelly Bean" is not showing....
    pls check and find a solution to fix it.

    thanks

    ReplyDelete
  52. ohh Wow you have amazing blog. I congratulate for this


    Website design

    ReplyDelete
  53. Not working on my blog.

    http://android-xtreme-apk.blogspot.com/

    ReplyDelete
  54. itz not working for my site:

    www.coizome.blogspot.com
    please check it out

    ReplyDelete
  55. Brother, please update this. The image link that is : http://mybloggertricks.googlecode.com/files/comment-boxbg.png

    showing error 404 and not working in script..
    So please update/reupload the image...

    thanks
    India Education News

    ReplyDelete
  56. This comment has been removed by the author.

    ReplyDelete

  57. hello musTafa !! It Can Be ":includable id='comment-form' var='post
    " Doesn't exist In my HTML CODE
    ?.. Becouse I Did'not Found IT !! HELP mE pLEASE BROTHER . thank You ♥

    Notice: my Blog : http://gamiinghero.blogspot.com/

    ReplyDelete
  58. Not Working Man ! I NEED Your Help. !

    I did all steps , then The Box Of Click Here To Add Comeent Come , But if any one click on it then It is not Working ! Link Is not working i mean ! Please help Fast ! Advance THANKS !

    ReplyDelete
  59. Hi i am using iframe full height in my blog.
    Used CSS is:
    #iframe {
    height: 100%;
    width: 100%;
    display: block;
    border:0;
    margin:0;
    padding:0;
    }

    and Javascript is:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
    <script>

    var height = window.innerHeight;

    $undefineddocument).readyundefined functionundefined){

    $undefined&#39;iframe&#39;).cssundefined&#39;height&#39;, height)

    } );

    </script>

    and HTML is:
    <iframe id="iframe" src="http://mybloggertricks.com"></iframe>

    It shows full height perfectly in all browsers without IE, how to get full height in IE. Please help me in this.

    see that blog here:
    http://new-temp.blogspot.com/2012/12/my-blogger-tricks.html

    ReplyDelete
  60. I had tested this in Dreamviewer with the same above attributes it's working fine in IE also. But only in blogger it's not working in only IE browser. Please help me anybody on this problem Please Help

    ReplyDelete
  61. @Mohammad Mustafa Ahmedzai
    I applied all steps, but the trigger button's background is transparent.
    Please tell me how to solve it.
    My Blog

    ReplyDelete
  62. The above image is not hosted.
    Replace it with this one:
    http://4.bp.blogspot.com/-w6rbdy4LCtI/UKdcV7jX1aI/AAAAAAAAIAw/ekWT8oI7JZw/s1600/comment-boxbg.png


    My Blog ••• Web Developer / Designer

    ReplyDelete
  63. This comment has been removed by the author.

    ReplyDelete
  64. Asalam-o-Alaikum!

    i want to ask that in my blog, there are extra options present below comment box like "Create a link","Subscribe to: Post Comments (Atom)" and other also... please brother help me ! how can i remove these. . .!
    my blog is : http://itnewscorner4u.blogspot.com

    ReplyDelete
  65. Muhammad Please help i can't explain my comment box problem by typing just simply see this pic then you ill get

    http://lh3.googleusercontent.com/-Qqqd63GpOpU/UP8CiouJz5I/AAAAAAAAADI/2ct78DBYDuk/s912/Capture.PNG

    when some continue typing without pressing enter for next line then this happens??????

    ReplyDelete
  66. It's not hiding my comment box. the comment box is already there when the page loads, and when the button is clicked, it's still there. nothing happens.

    ReplyDelete
  67. Hi, you explained the topic very well. The contents has provided meaningful information thanks for sharing info
    Free Premium Wordpress Themes

    ReplyDelete
  68. salam its not working ap nay kaha ke ye ap ke jesa ho jae ga likin ye to jahan par pehlay se comment hai wahan to kuch show hi nai ho raha plz help to solve this

    ReplyDelete
  69. Sir, my name is Hasibul Hasan.
    Sir, how can i add multiple code box inside blogger post? like your site.

    ReplyDelete
  70. I added it but when i expand it, it expands and collapse and then expand. If i collapse it, it's collapsed, expanded and then collapsed. Why this? www.gameguidist.com

    ReplyDelete
  71. http://honney2bunny.blogspot.in/p/home-page.html

    ReplyDelete
  72. If the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  73. @shoaib khan
    If the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  74. @umair aliIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  75. @Kader LocoIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  76. @Noman khanIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  77. @crazygrapeIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  78. @Umais Bin SajjadIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  79. @Rahul SethiIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  80. @android-xtreme-apkIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  81. @VivekIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  82. @Hari keshIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  83. @shaswat shahIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/

    ReplyDelete
  84. Its not working on my blog

    http://thetrickslab.com

    ReplyDelete
  85. Not Working in my blog: http://gamingtracks.blogspot.in/

    ReplyDelete
  86. Brother it is not working in my blog please help !!!!

    I have tried it!!
    it looks nice but not working
    Help!!
    http://amazinghemant.blogspot.in/

    ReplyDelete
  87. @Prime Aque
    Hy Aque....Buddy Can You Please Tell How You Did That ? or can you give me link from i can also add facebook expand/collapse comment box...I've added Simple Facebook Comment Box for My Site.But i want it to be collapsed,only open when ever a user clicks on it....I Can add this expand/collapse blogger comment box..but the problem is i dont want to use blogger comments.
    I've searched on Google But couldnt found any expand/collapse facebook comment box...

    ReplyDelete
  88. I need help with the new blogger template. I can't find the comments, in the HTML code.

    ReplyDelete
  89. This comment has been removed by the author.

    ReplyDelete
  90. Mustafa you are my ideal.
    plz visit my little movies blog http://440kajhatka.blogspot.com/

    ReplyDelete
  91. This comment has been removed by the author.

    ReplyDelete
  92. This is not working on my blog,

    http://androidapkunlimited.blogspot.com/

    can you help me on this?

    ReplyDelete
  93. This comment has been removed by the author.

    ReplyDelete
  94. I did this its working ,i need a help i want to remove the home and old post label from the blog how to do help me...
    my blog http://sgynews.blogspot.com/

    ReplyDelete
  95. marvelous thanks for sharing!!! there is a pay per click company if you want you can try it.

    ReplyDelete
  96. Awesome post. I implemented this in a little test blog to see if everything works correctly, and it did.

    But i got a problem. I have tried everything, asked around, experimented, and i cannot fix it.

    If a post has one or more comments on it, the widget doesn't work, it's like non-existent if there are any comments added on a post. It works perfectly only on posts with no comments.

    Help me out if you can. Thanks.

    ReplyDelete