title: Make div appear on active
body: <p>I have a div with a UL that controls the filtering of my portfolio items, using the .active class I changed the active color of the filters. But I also have a DIV that is below the filters and I want it to appear and disappear when each filter is clicked. I am just having trouble with the CSS selectors!</p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;!--=== Portfolio Filter ===--&gt;
  &lt;div class="row"&gt;
      &lt;ul class="nav nav-pills col-xs-12"&gt;
          &lt;li class="filter" data-filter="all"&gt;Show Me TV&lt;/li&gt;
          &lt;li class="filter" data-filter="print"&gt;Conventions&lt;/li&gt;
          &lt;li class="filter" data-filter="web"&gt;Elite&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;!--=== Description ===--&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;span class="category-description"&gt;
              all description
          &lt;/span&gt;
          &lt;span class="category-description"&gt;
              conventions description
          &lt;/span&gt;
          &lt;span class="category-description"&gt;
              elite description
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.category-description { visibility:hidden; }
  #portfolio .nav &gt; li.active { color:#e21f24; }
  #portfolio .nav &gt; li.active + .category-description { visibility:visible; }
  </code></pre>
  
  <p>Can anyone help out a bit?</p>