<p>So after having a ton of trackbacks in a recent article, <a href="//trevor-davis.com/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/">The 6 Most Important CSS Techniques You Need To Know</a>, I thought that it was kind of breaking up the flow of the comments.</p>

<p>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:</p>

<ol><li>Assign a class to all trackbacks</li>
<li>Hide them all with CSS</li>
<li>Add a jQuery visibility toggle</li>
</ol><h2>1) Assign a Class to All Trackbacks</h2>
<p>In your <strong>comments.php</strong> theme file, find a line that looks like this:</p>
<div class="codeblock"><code>
&lt;li id="comment-&lt;?php comment_ID() ?&gt;"&gt; 

</code></div>
<p>And replace it with this:</p>
<div class="codeblock"><code>
&lt;li class="&lt;?php if(get_comment_type() != 'comment') echo 'trackback'; ?&gt;" id="comment-&lt;?php comment_ID() ?&gt;"&gt; 

</code></div>
<h3>Explanation</h3>
<p>The get_comment_type function returns either <strong>comment</strong>, <strong>trackback</strong>, or <strong>pingback</strong>. Since I want to hide everything except comments, I filter out anything that <strong>does not equal comment</strong>, so I assign a class of trackback to that list item.</p>

<h2>2) Hide them All with CSS</h2>
<p>Ok, easy enough, just add the following to your stylesheet:</p>
<div class="codeblock"><code>
ol.commentlist li.trackback { display: none; } 

</code></div>

<p>That should be pretty self explanatory.</p>

<h2>3) Add a jQuery Visibility Toggle</h2>
<p>The logic of the JavaScript will be as follows:</p>
<ol><li>Check to see if there are any list items with a class of trackback.</li>
<li>Add a link to Show/Hide trackbacks.</li>
<li>Add a click event to the Show/Hide trackback link.</li>
<li>Update the text of the link accordingly.</li>
</ol><p>First, let’s execute the JavaScript once the document is ready:</p>
<div class="codeblock"><code>
$(document).ready(function(){<br />            <br />}); 

</code></div>

<p>Next, let’s check to see if there are any elements with a class of trackback:</p>
<div class="codeblock"><code>
$(document).ready(function(){<br /> if($('.trackback').length &gt; 0) {<br /> <br /> }         <br />}); 

</code></div>

<p>Next, if there are trackbacks on the page, insert a link to show trackbacks:</p>
<div class="codeblock"><code>
$(document).ready(function(){<br /> if($('.trackback').length &gt; 0) {<br />  $('#comments').after('&lt;a href="#" id="toggleTrackbacks"&gt;(Show Trackbacks)&lt;/a&gt;');<br /> }         <br />}); 

</code></div>

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

<p>Finally, I want to add in the <strong>click</strong> event to the link, and toggle the text depending upon if the trackbacks are visible or not:
</p><div class="codeblock"><code>
$(document).ready(function(){<br /> if($('.trackback').length &gt; 0) {<br />  $('#comments').after('&lt;a href="#" id="toggleTrackbacks"&gt;(Show Trackbacks)&lt;/a&gt;');<br />  $('#toggleTrackbacks').click(function() {<br />   $('.trackback').slideToggle('slow');<br />   if($('#toggleTrackbacks').text() == '(Show Trackbacks)') {<br />    $('#toggleTrackbacks').text('(Hide Trackbacks)');<br />   } else {<br />    $('#toggleTrackbacks').text('(Show Trackbacks)');<br />   }<br />   return false;<br />  });<br /> }         <br />}); 

</code></div>

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

<p>I have grabbed some of the comments from <a href="//trevor-davis.com/blog/tutorial/the-ultimate-png-guide/">The Ultimate PNG Guide</a> so you can <a href="//assets.trevor-davis.com/play/jquery-collapse-trackbacks/">see a demo of this in action</a>.</p>

<p>I love how simple jQuery is.</p>