aOZZEb ('-' * 6)
Forked from Captain Anonymous's Pen mJEEBW.
A Pen by Greg Brock on CodePen.
aOZZEb ('-' * 6)
Forked from Captain Anonymous's Pen mJEEBW.
A Pen by Greg Brock on CodePen.
<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> |
$('.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(); | |
} | |
}); |
.selector { | |
li { | |
display: inline; | |
list-style: none; | |
&.active { | |
font-weight: bold; | |
} | |
} | |
} | |
.people { | |
li { | |
width: 200px; | |
float: left; | |
list-style: none; | |
} | |
} |