WordPress.org

Ready to get started?Download WordPress

Forums

A simple show/hide comments button? (12 posts)

  1. yurini
    Member
    Posted 2 years ago #

    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!

  2. jevets
    Member
    Posted 2 years ago #

    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

  3. yurini
    Member
    Posted 2 years ago #

    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

  4. yurini
    Member
    Posted 2 years ago #

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

  5. antonel1
    Member
    Posted 1 year ago #

    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!

  6. antonel1
    Member
    Posted 1 year ago #

    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>

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

  8. deadpeasant
    Member
    Posted 1 year ago #

    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.

  9. cameracassidy@gmail.com
    Member
    Posted 1 year ago #

    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?

  10. cameracassidy@gmail.com
    Member
    Posted 1 year ago #

    Also, does it matter that I'm using a comments plugin rather than the template default? I'm using Disqus. Thanks!

  11. antonel1
    Member
    Posted 1 year ago #

    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!

  12. deadpeasant
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic