gbrock · May 16, 2015 22:22
diff --git a/index.html b/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>  
diff --git a/mJEEBW.markdown b/mJEEBW.markdown
diff --git a/script.js b/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();
 });
diff --git a/style.css b/style.css
 .selector {
  li {
    display: inline;
    list-style: none;
    
    &.active {
      font-weight: bold;
    }
  }
  
 }

 .people {
  li {
    width: 200px;
    float: left;
    list-style: none;
  }
 }
	$('.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();
	});
No results found