aOZZEb

aOZZEb.markdown

aOZZEb ('-' * 6)

Forked from Captain Anonymous's Pen mJEEBW.

A Pen by Greg Brock on CodePen.

License.

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>  

script.js

$('.selector li').click(function () {
  var nodes = $('.people li');
  var isCurrentlyActive = $(this).hasClass('active');
  
  if(isCurrentlyActive) {
    $(this).removeClass('active');
    nodes.show();
  } else {
	  $(this).siblings().removeClass('active');
    $(this).addClass('active');

    var name = $(this).attr('data-name');

    nodes.hide();
    nodes.filter('.' + name).show();
  }
});

style.css

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

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