mJEEBW

index.html

<ul class="selector">
  <li data-name="red">Red</li>
  <li data-name="blue">Blue</li>
</ul>  

<ul class="people">
  <li class="red">
     Ann
    <p>Lorem ipsum</p>
  </li>
  <li class="red">
    Terry
  </li>
  <li class="blue">
    Bettina
  </li>
</ul>  

mJEEBW.markdown

mJEEBW ('-' * 6)

A Pen by Captain Anonymous on CodePen.

License.

script.js

$('.selector li').click(function () {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
  
  var name = $(this).attr('data-name');
  
  var nodes = $('.people li');
  
  nodes.hide();
  nodes.filter('.' + name).show();
});


$(document).on('click', '.selector li.active', function () {
  $(this).parent().children().removeClass('active');
  
  var nodes = $('.people li');
  
  nodes.show();
});

style.css

.selector {
  li {
    display: inline;
    list-style: none;
    
    &.active {
      font-weight: bold;
    }
  }
  
}

.people {
  li {
    width: 200px;
    float: left;
    list-style: none;
  }
}