A simple show/hide comments button?

  • antonel1

    (@antonel1)


    13 years, 2 months ago

    This is how to show and hide comments in a post using jQuery. Continuation from http://ww.wp.xz.cn/support/topic/a-simple-showhide-comments-button?replies=12 which is closed.

    1. Place the show and hide comments jQuery in the single.php file. 

    <script>
		var flip = 0;
		$("show").click(function () {
		$("hide").toggle( flip++ % 2 == 0 );
		});
		</script>

    I placed it at the bottom of the single.php page, right above the following code:

    <?php endwhile; // end of the loop. ?>

    I understand we shouldn’t be uploading the jQuery this way. I tried other methods and I can only get it to work this way.

    2. In order for the jQuery to work, you need to insert the following two codes:

    Insert the ‘show‘ tags around the link you want visitors to click on to show the comments. For example, I have the following code in my single.php page to display the number of comments I have. I want the visitors to see all the comments once they click on this link. So I wrapped the ‘show’ tag around it, like this:

    <show><?php comments_popup_link(' 0 Comments ', '1 Comment ', '%Comments '); ?></show>

    Insert the ‘hide‘ tags around the code that displays the comments, basically the part you want to hide. For example, I have the following code in my single.php page that displays all the comments. So I wrapped the ‘hide’ tag around it, like this:

    <hide style="display: none"><?php comments_template( '', true ); ?></hide>

    3. Don’t forget to add the following code in your header.php for jQuery to work:

    <html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<title></title>
</head>

    Hope this helps!

The topic ‘A simple show/hide comments button?’ is closed to new replies.