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:
- Optimize your WordPress page loading times with a simple tweak
- How to use custom page template in WordPress themes
- WordPress Fundamentals for Newbies
Posted in: WordPress
TAGS:comment toggle, jquery toggle all, jquery toggle comments, one line love comments, toggle code wordpress, toggle comment form, toggle comment wordpress, toggle comments, toggle comments blog, toggle text wordpress code, toggle themes, toggle wordpress code, togglr comments website, usa one liner comment, wordpress toggle, wordpress toggle comments
14 Comments
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
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.
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.
...great tip, thanks for share, ... and to the side of SEO how to behave ... you rely on search engines
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
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 ;-)
hfghfgh
I use it now all the time to reply to most recent comments without needing to scroll :)
Stupid simple, and really improves usability if combined with the 'Jump to Comment form' anchor.
I see you have changed themes. Which theme is this?
What happens for comments spread over more than a page?
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
Ahh the wonders :)
ok, so i toggled your comment to post mine faster ;)
This is a test comment for code demonstration.