You can do this with just jquery. It’s best to let jquery add the show/hide anchor, that way if javascript is disabled, the user won’t see a link that does nothing.
Given that your comments div has an id of “comments”:
[please follow the forum rules when posting code – the forum limit is 10 lines]
http://pastebin.com/FFFjaiCX
Thread Starter
yurini
(@yurini)
Okay thank you I will go home and try this! I supose this snippet of code is checking if the post is allowing comments?:
// Only do this work if that div isn't empty
if (commentsDiv.length) {
I didn´t mention that I was planing to display the current number of comments within the button like: “Show comments (21)”. I know how to do this with the wordpress commands, but maybee I do need to pull that out of jquery now aswell? Unfort I dont know how to do that.
Regards yurini
Thread Starter
yurini
(@yurini)
The jquery code works like a charm, thanks!
To only display the show/hide button on posts that allow comments this code can be used:
<?php if( comments_open( $post->ID ) ) { ?>
<?php comments_template( '', true ); ?>
<?php } ?>
Unfort. I have not yet solve a nice way to display the current number of comments within that button like “Show comments (21)”.
Where do I past the jquery code jevets has linked above (http://pastebin.com/FFFjaiCX) to my wordpress website so that I can show/hide comments? Thank you in advance!
Oh, you would insert the jQuery code I mentioned in the header.php file, between <header> and </header>.
And make sure you insert the code below right under <header> in the header.php file for the jQuery to work!:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Moderator
Jan Dembowski
(@jdembowski)
Forum Moderator and Brute Squad
As this is a bit of a dated thread, you may have better luck posting a new thread instead… 😉
Also while you could load jquery that way, this method plays nicer with the other kids (plugins):
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
This is what I was looking for too. I followed antonel1’s recipe and it worked for me. The only reason I’m replying is because I wanted to take Jan’s advice about jquery but the link was too tech-y for me to understand, so I just stuck to antonel1’s method. Hope that’s okay.
In my header.php file I don’t see the code <header> so I’m not sure where to place the jQuery code. Is there somewhere else I should put it instead?
Also, does it matter that I’m using a comments plugin rather than the template default? I’m using Disqus. Thanks!
Hello,
All websites have a basic template like this:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
You should be able to find the head tag in the header.php file.
I inserted the following script between the <head> and </head> tags in the header.php file:
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<title></title>
</head>
And then I inserted the show and hide comments jQuery in the single.php file:
<hide style=”display: none”><?php comments_template( ”, true ); ?></hide>
<script>
var flip = 0;
$(“show”).click(function () {
$(“hide”).toggle( flip++ % 2 == 0 );
});
</script>
Remember to wrap the comments tag in single.php file with a <show> tag like this:
<show><?php comments_popup_link(‘0 Comments ‘, ‘1 Comment ‘, ‘% Comments ‘); ?></show>
Hope this helps!
Thanks for this but I’m more confused now than before.
1. Where does the show and hide comments jQuery go, inside the single.php file? I tried to use it and it removed the show/hide links, so that comments were displayed all the time.
2. I don’t understand your instruction to ‘wrap the comments tag’. Where does that code go? What does it do?
3. What is meant to happen when users follow links to comments? On my blog, these links don’t work: users are taken to the bottom of the post, with no comments shown, e.g.
englishspeechservices.com/blog/?p=5359#comment-13530
(4. I have another problem that when users follow comment links, my facebook like counter appears as zero. I’ve no idea why.)
