title: jQuery Dynamic show/hide navigation with isotope
body: <p>I am building a dynamic filtering navigation bar for use with the isotope items in my document.  I have a few different categories in my nav, each with relative subcategories.  I am trying to build a nav where the Main categories show on load.  </p>
  
  <p>On load I also populate the DOM with all of the elements in random order.  When you click a category link it filters out the results, and organizes the relative elements. I also want to show the relative subcategories to the filtered section.  Then if you select a different category, the existing subnav fades out, and the relative sub nav fades in.</p>
  
  <p>All of my sorting and everything relative to isotope works great.  Its the intelligent show/hide of the subnav I am having a hard time with.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;nav id="filters"&gt;
    &lt;div id="categories"&gt;
      &lt;h2&gt;Select a Category:&lt;/h2&gt;
      &lt;br&gt;
      &lt;li&gt;&lt;a href="#" data-filter="*"&gt;All Categories&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".autos" data-category="autos"&gt;Autos&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".lifestyle" data-category="lifestyle"&gt;Lifestyle&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".people" data-category="people"&gt;People&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".tech" data-category="tech"&gt;Tech&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".trends" data-category="trends"&gt;Trends&lt;/a&gt;&lt;/li&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div id="autos"&gt;
      &lt;h2&gt;Autos:&lt;/h2&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".autos" data-category="autos"&gt;Show All&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".news" data-category="autos"&gt;News&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".car-tech" data-category="autos"&gt;Car Tech&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".fuel-economy-and-safety" data-category="autos"&gt;Fuel Economy &amp;amp; Safety&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".buying-and-selling" data-category="autos"&gt;Buying &amp;amp; Selling&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".autos, .everything-else" data-category="autos"&gt;Everything Else&lt;/a&gt;&lt;/li&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div id="lifestyle"&gt;
      &lt;h2&gt;Lifestyle:&lt;/h2&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".lifestyle" data-category="lifestyle"&gt;Show All&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".travel" data-category="lifestyle"&gt;Travel&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".music" data-category="lifestyle"&gt;Music&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".food" data-category="lifestyle"&gt;Food&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".shopping" data-category="lifestyle"&gt;Shopping&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".lifestyle, .everything-else" data-category="lifestyle"&gt;Everything Else&lt;/a&gt;&lt;/li&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div id="people"&gt;
      &lt;h2&gt;People:&lt;/h2&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".people" data-category="people"&gt;Show All&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".who-you-know" data-category="people"&gt;Who You Know&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".who-you-should-know" data-category="people"&gt;Who You Should Know&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".people, .everyone-else" data-category="people"&gt;Everyone Else&lt;/a&gt;&lt;/li&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div id="tech"&gt;
      &lt;h2&gt;Tech:&lt;/h2&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".tech" data-category="tech"&gt;Show All&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".business" data-category="tech"&gt;Business&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".pleasure" data-category="tech"&gt;Pleasure&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".tech, .everything-else" data-category="tech"&gt;Everything Else&lt;/a&gt;&lt;/li&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div id="trends"&gt;
      &lt;h2&gt;Trends:&lt;/h2&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".trends" data-category="trends"&gt;Show All&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".online" data-category="trends"&gt;Online&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".offline" data-category="trends"&gt;Offline&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter=".trends, .everything-else" data-category="trends"&gt;Everything Else&lt;/a&gt;&lt;/li&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  
    $('#filters &gt; div:gt(0)').hide();
  
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      var category = $(this).attr('data-category');
      var $subnav = $('#filters').find('#'+category);
  
      if($subnav.is(":hidden")) {
        $subnav.fadeIn();
      } 
  
      if($subnav.is(":visible") &amp;&amp; $subnav.attr("id") != category) {
  
      }
  
      $container.isotope({ filter: selector });
      return false;
    });
  });
  </code></pre>
  
  <p>I am open to any suggestions.  Whether it is restructuring my nav, or redaclaring my variables in a new fashion.  I have been staring at this block of code for a while, and brain is turning to mush. I was trying to use the second <code>if</code> statement to handle the hiding of the non-relative subnav.</p>
  
  <p>If you like you can hop over to my site with the example on display:</p>
  
  <p><a href="http://preview.robabby.com/" rel="nofollow">EXAMPLE</a></p>