jQuery - Using index

jQuery index() returns the positon (or index) of an element in relation to it's parent. This can be a powerful tool.

HTML

<ul id="controller">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
</ul>
<ul id="content">
    <li class="pink">Content1</li>
    <li class="green">Content2</li>
    <li class="red">Content3</li>
</ul>

CSS

#controller{
    padding:10px 10px 0 10px;
    background:red;
    color:white;
    float:left;
    width:150px;
}
#controller li{
    font:200 12px/18px Arial;
    border:solid 1px white;
    margin-bottom:10px;
    text-align:center;
    cursor:pointer;
}
#content{
    padding:10px;
    background:black;
    color:white;
    float:right;
    width:200px;
}
#content li{
    display:block;
    height:150px;   
    text-align:center;
    font:900 14px/150px Arial;
}
.green{
    background:green;
    color:yellow;
}
.pink{
    background:pink;
    color:red;
}
.red{
    background:red;
    color:white;
}

JavaScript

//cache the target element
var target = $('#content');

//hide children except the first
target.find('li:first').siblings().hide();

//add click event to each li
$('#controller li').click(function(){
    //on click find index (and add one) then show the relevant list item
   target.find('li:nth-child('+($(this).index()+1)+')').show().siblings().hide();
});