A simple show/hide comments button?

  • I am looking to use a build in (no plugin) button code that can toggle to show/hide the comments. It should just show all the comments template once you click the button and keep the “show” statement until you eventually choose to click “hide”.

    If the button only is beeing diplayed when the post allows comments would be a bonus. In other words I would not like to button the be shown at all if the posts doesnt allow commeting.

    The onces I tried to build hasn′t worked out very well. The code will be implemented in single.php and use of jquery is fine with me. Any suggestions?

    I would be greatful!

Viewing 11 replies - 1 through 11 (of 11 total)

  • 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]

    https://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 (https://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="https://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):

    https://codex.www.ads-software.com/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.

    [email protected]

    (@cameracassidygmailcom)

    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?

    [email protected]

    (@cameracassidygmailcom)

    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=”https://code.jquery.com/jquery-latest.js”></script&gt;

    <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.)

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘A simple show/hide comments button?’ is closed to new replies.