Сделать div активным

Question

У меня есть div с UL, который контролирует фильтрацию моих элементов портфеля, используя класс .active, я изменил активный цвет фильтров. Но у меня также есть DIV, который ниже фильтров, и я хочу, чтобы он появлялся и исчезал при каждом щелчке фильтра. У меня просто проблемы с CSS-селекторами!

Мой HTML:

<!--=== Portfolio Filter ===--> 
<div class="row"> 
    <ul class="nav nav-pills col-xs-12"> 
     <li class="filter" data-filter="all">Show Me TV</li> 
     <li class="filter" data-filter="print">Conventions</li> 
     <li class="filter" data-filter="web">Elite</li> 
    </ul> 
</div> 

<!--=== Description ===--> 
<div class="container"> 
    <div class="row"> 
     <span class="category-description"> 
      all description 
     </span> 
     <span class="category-description"> 
      conventions description 
     </span> 
     <span class="category-description"> 
      elite description 
     </span> 
    </div> 
</div> 

CSS

.category-description { visibility:hidden; } 
#portfolio .nav > li.active { color:#e21f24; } 
#portfolio .nav > li.active + .category-description { visibility:visible; } 

Может кто-нибудь помочь немного?

Answer 1

Я думаю, что простое и чистое решение, меняет разметку и переместить description элемент внутри li элемента:

<li class="filter" data-filter="print"> 
    Conventions 
    <div class="description">Conventions Description</div> 
</li> 

Теперь вы можете взять под контроль description элемента:

.description { display: none; } 
li.active .description { display: block; } 

(вам нужно контролировать результат, играя с CSS, чтобы достичь того, чего вы хотите)

JSFiddle Demo.