So after having a ton of trackbacks in a recent article, The 6 Most Important CSS Techniques You Need To Know, I thought that it was kind of breaking up the flow of the comments.

I didn’t necessarily want to completely remove them because I thought that some people might be interested in them. These are the steps that I want to take:

  1. Assign a class to all trackbacks
  2. Hide them all with CSS
  3. Add a jQuery visibility toggle

1) Assign a Class to All Trackbacks

In your comments.php theme file, find a line that looks like this:

<li id="comment-<?php comment_ID() ?>"> 

And replace it with this:

<li class="<?php if(get_comment_type() != 'comment') echo 'trackback'; ?>" id="comment-<?php comment_ID() ?>"> 

Explanation

The get_comment_type function returns either comment, trackback, or pingback. Since I want to hide everything except comments, I filter out anything that does not equal comment, so I assign a class of trackback to that list item.

2) Hide them All with CSS

Ok, easy enough, just add the following to your stylesheet:

ol.commentlist li.trackback { display: none; } 

That should be pretty self explanatory.

3) Add a jQuery Visibility Toggle

The logic of the JavaScript will be as follows:

  1. Check to see if there are any list items with a class of trackback.
  2. Add a link to Show/Hide trackbacks.
  3. Add a click event to the Show/Hide trackback link.
  4. Update the text of the link accordingly.

First, let’s execute the JavaScript once the document is ready:

$(document).ready(function(){
            
}); 

Next, let’s check to see if there are any elements with a class of trackback:

$(document).ready(function(){
 if($('.trackback').length > 0) {
 
 }         
}); 

Next, if there are trackbacks on the page, insert a link to show trackbacks:

$(document).ready(function(){
 if($('.trackback').length > 0) {
  $('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
 }         
}); 

I am adding the show/hide trackback link after the heading with an id of comments.

Finally, I want to add in the click event to the link, and toggle the text depending upon if the trackbacks are visible or not:

$(document).ready(function(){
 if($('.trackback').length > 0) {
  $('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
  $('#toggleTrackbacks').click(function() {
   $('.trackback').slideToggle('slow');
   if($('#toggleTrackbacks').text() == '(Show Trackbacks)') {
    $('#toggleTrackbacks').text('(Hide Trackbacks)');
   } else {
    $('#toggleTrackbacks').text('(Show Trackbacks)');
   }
   return false;
  });
 }         
}); 

So basically, I am adding the jQuery slideToggle effect when the show/hide trackbacks link is clicked. Then, if the text in the show/hide trackbacks link is Show Trackbacks, I change it to Hide Trackbacks, and the opposite when the text is Hide Trackbacks.

I have grabbed some of the comments from The Ultimate PNG Guide so you can see a demo of this in action.

I love how simple jQuery is.