How to toggle comments with one line of code


I accidentally discovered today a great usability feature for WordPress blogs - ability to toggle display of comments with a simple click.

Usually when you have a lots of comments on a post the navigation is hindered as it is difficult to get to the footer of the site. Also when the user wants to give a comment directly in reference to the post, it makes it nearly impossible as they need to scroll up and down all the time.

The solution is following line of code that you can insert in your comment template. I have put mine just below the number of comments.

<a style="cursor:pointer" onclick="jQuery('#comments').toggle();">Toggle comments</a>

This assumes that you have jquery loaded (most sites do) and that your comments div is #comments. You can change to match your needs.

Go ahead try it out below.


Suggested reading:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , ,
leave a comment.

Comments:

14 Comments

  1. Anatoly Petrov
    Sep 10th, 2012

    ooo.... thanks for your nice information ..great blog.I have to change it to embedded just to get

    the threaded reply. Seems like there are lot of bugs still yet.my blog site is Big brother

  2. Apr 22nd, 2012

    Thanks for this code. I have been searching for two days for something like this. I almost have it working. Question, on the blog index page, I want it to show only the response for for the blog that is clicked on, and right now when i click on the link, it just jumps up a bit, and shows all the response forms. I am not a website coder, and am just looking for some pointers.

  3. zach
    Jan 23rd, 2012

    Hello, Thank you for this. I added this code and set css display:none for comment for id #respond. It works perfect for main bottom comment form, however on threaded comment, when clicked on Reply to comment link, it doesn't show comment form due to css display:none and have to scroll down to bottom of page only to click and add reply.

    Anyway around it? Thanks.

  4. Dec 26th, 2010

    ...great tip, thanks for share, ... and to the side of SEO how to behave ... you rely on search engines

  5. Marshall
    Aug 19th, 2009

    For some reason that bit of code causes all my comments, and comment form to disappear... even the words "Toggle Comments" vanishes. Only way to get the comments/form back is to reload the page.

    Couldn't figure out why it did that

    • Apr 4th, 2011

      is easy - and after years, i'd like to amswer for those css starters, wich found the question via google:

      ...simply move your toggle tag out of the comments! Place it before, or after your #comments DIV and they cant toggle himself anymore ;-)

  6. Jul 10th, 2009

    hfghfgh

  7. Apr 14th, 2009

    I use it now all the time to reply to most recent comments without needing to scroll :)

  8. Apr 14th, 2009

    Stupid simple, and really improves usability if combined with the 'Jump to Comment form' anchor.

  9. Apr 14th, 2009

    I see you have changed themes. Which theme is this?

    What happens for comments spread over more than a page?

  10. Apr 13th, 2009

    Ok, just a tip for the tip, is possible to do that also without JQuery. Is just a bit less than a single line.
    A couple of examples:
    http://csscreator.com/node/708
    http://www.rgagnon.com/jsdetails/js-0086.html

    Well, with few changes, you can actually write everything in one line... a very long line :D

  11. Apr 13th, 2009

    Ahh the wonders :)

  12. Apr 13th, 2009

    ok, so i toggled your comment to post mine faster ;)

  13. Apr 13th, 2009

    This is a test comment for code demonstration.

Have your say

Your email is never published nor shared. Required fields are marked *

*
*

About

vladimir prelovac Vladimir Prelovac is CEO of Prelovac Media, a computer engineer by profession and an adventurer by state of mind. more +


"I would love to change the world, I just don't have the source code yet."

Services

Manage multiple WordPress sites

Built for WordPress enthusiasts, ManageWP helps you manage all your WordPress sites from one central location.

Books

WordPress Plugin Devleopment Book Read my book WordPress Plugin Development: Beginner's Guide

Published by Packt Publishing, available online through Amazon.