title: Filtering Categories with jQuery
body: <p>Hi I'm doing a project for school, I'm only doing the front-end of the coding and one of the requirements is that I filter my blog categories with jQuery. Usually I would use PHP and just filter it based off of the parameter but this project is all static code and no DB. Currently I have two pages for the blog, <code>blog.html</code> and <code>blog-post.html</code> both with a sidebar that has the categories. My approach right now is have a id for each category and whenever that link is click I'll hide the current listing of blog posts and show the one's with the matching class, my problem is though when I'm on my <code>blog-post.html</code> page and click the filter link it obviously fail's as the content it's looking for isn't in the DOM. What would be the best approach around this, I have an idea that I just put all the content on one page like <code>blog.html</code> and then hide the <code>blog-post.html</code> content unless someone clicked the read more button is this a good approach or is there something better? Thanks in advance for any help!</p>
  
  <p><strong>BLOG.HTML</strong></p>
  
  <pre><code>&lt;!-- Filters --&gt;
  &lt;ul&gt;    
      &lt;li&gt;
          &lt;a id="web-design" class="filter" href="http://www.site.com/blog/"&gt;Web Design&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
           &lt;a id="web-development" class="filter" href="http://www.site.com/blog/"&gt;Web Development&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Articles --&gt;
  &lt;article class="layout-article web-design"&gt;
      &lt;h3 class="title-medium"&gt;Lorem Ipsum 2&lt;/h3&gt;
      &lt;p&gt;Donec in sem a nulla eleifend ...&lt;/p&gt;
      &lt;a href="http://www.site.com/blog/lorem-ipsum-2"&gt;Read More&lt;/a&gt;
  &lt;/article&gt;
  
  &lt;article class="layout-article web-development"&gt;
      &lt;h3 class="title-medium"&gt;Lorem Ipsum 1&lt;/h3&gt;
      &lt;p&gt;Suspendisse convallis egestas ...&lt;/p&gt;
      &lt;a href="http://www.site.com/blog/lorem-ipsum-1"&gt;Read More&lt;/a&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>BLOG-POST.HTML</strong></p>
  
  <pre><code>&lt;!-- Filters --&gt;
  &lt;ul&gt;    
      &lt;li&gt;
          &lt;a id="web-design" class="filter" href="http://www.site.com/blog/"&gt;Web Design&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
           &lt;a id="web-development" class="filter" href="http://www.site.com/blog/"&gt;Web Development&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Article --&gt;
  &lt;article class="layout-article web-design"&gt;
      &lt;h3 class="title-medium"&gt;Lorem Ipsum 2&lt;/h3&gt;
      &lt;p&gt;Donec in sem a nulla eleifend vivamus velit dolor, blandit quis sodales quis, ullamcorper vitae sem. Nunc elementum, eros sit amet pellentesque placerat, sem massa commodo lectus, nec auctor ligula quam eu nibh. Suspendisse potenti.&lt;/p&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
  
      $('.filter').click(function(e) { 
  
          $('.layout-article').hide();
  
          $('.' + this.id).show(500);
  
          return false;
      }); 
  });
  </code></pre>