0

I am attempting to create a button to show/hide comments in WordPress. I am currently using the following script:

<script>
$(document).ready(function() {

// Get the #comments div
var commentsDiv = $('#comment-section');

// Only do this work if that div isn't empty
if (commentsDiv.length) {

// Hide the comments div by default
$(commentsDiv).hide();

// Append a link to show/hide
$('<button/>')
  .attr('class', 'toggle-comments')
  .attr('href', '#')
  .html('Show Comments <span class="icon_comment"></span>')
  .insertBefore(commentsDiv);

// when show/hide is clicked
$('.toggle-comments').on('click', function(e) {
  e.preventDefault();

  // show/hide the div using jquery's toggle()
  $(commentsDiv).toggle('slow', function() {
    // change the text of the anchor
    var anchor = $('.toggle-comments');
    var anchorText = anchor.html() == 'Show Comments <span class="icon_comment"></span>' ? 'Hide Comments <span class="icon_comment"></span>' : 'Show Comments <span class="icon_comment"></span>';
    $(anchor).html(anchorText);
  });
});

} // End if commentsDiv.length

});
</script>

Now, this code functions as expected insofar as creation of the button is concerned (i.e., it creates a button labelled "Show Comments"); however, the button, which is created by the script, does not function as expected (i.e., it does not show/hide the #comment-section div). The script works perfectly in my test environment, but when I attempt to deploy it on a live WordPress install, the aforementioned behaviour occurs. Here is a test install with the script currently implemented: http://zyniker13.com/2013/11/20/test-post/. As you can see, the button is present, but it does nothing.

Thus far, I have tried placing the code in footer.php, comments.php, and separating the jQuery from the script (by placing the call to Google's CDN in the header and the script itself variously in the footer and comments.php). No matter where I put the code, I am unable to get it to work properly.

  • look at your browser's error console for js errors. also, have a look at the noConflict section of wp_enqueue_script – Milo Nov 21 '13 at 5:33
  • Good call on noConflit @Milo; I had forgotten WordPress ran jQuery in noConflict mode. Everything seems to be working now. – Zyniker Nov 21 '13 at 6:03
0

when you use jquery in wordress it is better to avoid using $() and use jQuery() instead. Don't know the actual reasoning behind that but it is probably done that way to avoid collisions with other libraries that use the $ syntax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.