Can I improve this jQuery code repetition?
<p>I want to learn best practices with jQuery and how to avoid code reptition and use elegant code. </p>

<p>I've written:</p>

<pre><code>&lt;script type="text/javascript"&gt;
  // Change the category name with the filter
  $(function() {

    // Featured
    $('.featured').click(function() {
      $('.categoryTitle h1').hide().html('Featured').fadeIn('slow');
    });
    // Web
    $('.web').click(function() {
      $('.categoryTitle h1').hide().html('Web').fadeIn('slow');
    });
    // Brand
    $('.brand').click(function() {
      $('.categoryTitle h1').hide().html('Brand').fadeIn('slow');
    });
    // Print
    $('.print').click(function() {
      $('.categoryTitle h1').hide().html('Print').fadeIn('slow');
    });
    // All
    $('.all').click(function() {
      $('.categoryTitle h1').hide().html('All').fadeIn('slow');
    });
  });
&lt;/script&gt;
</code></pre>

<p>HTML</p>

<pre><code>&lt;ul id="filters"&gt;
    &lt;li&gt;&lt;a class="featured" href="#" data-filter=".feature-this"&gt;Featured&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="web" href="#" data-filter=".category-web"&gt;Web&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="brand" href="#" data-filter=".category-brand"&gt;Brand&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="print" href="#" data-filter=".category-print"&gt;Print&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="all" href="#" data-filter="*"&gt;Show All&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="categoryTitle"&gt; &lt;h1&gt;Featured&lt;/h1&gt; &lt;/div&gt;
</code></pre>

<p>Is this as elegant as it can be, or am I missing how to stop diving into the DOM as much?</p>

<p><strong>Note</strong> I am using Isotope, a jQuery plugin.</p>

<p><strong>Edit</strong> None of the answers are currently changing categoryTitle, but I did ommit that it has a default value of Featured.</p>
