Code:
$(document).ready(function(){
var ulOptions = '<ul id="options"> <li><a href="#" class="all">All</a></li> \n\
<li><a href="#" class="A">A</a></li> \n\
<li><a href="#" class="B">B</a></li> \n\
<li><a href="#" class="C">C</a></li> \n\
<li><a href="#" class="D">D</a></li> \n\
<li><a href="#" class="E">E</a></li> \n\
<li><a href="#" class="F">F</a></li> \n\
<li><a href="#" class="G">G</a></li> \n\
<li><a href="#" class="H">H</a></li> \n\
<li><a href="#" class="I">I</a></li> \n\
<li><a href="#" class="J">J</a></li> \n\
<li><a href="#" class="K">K</a></li> \n\
<li><a href="#" class="L">L</a></li> \n\
<li><a href="#" class="M">M</a></li> \n\
<li><a href="#" class="N">N</a></li> \n\
<li><a href="#" class="O">O</a></li> \n\
<li><a href="#" class="P">P</a></li> \n\
<li><a href="#" class="Q">Q</a></li> \n\
<li><a href="#" class="R">R</a></li> \n\
<li><a href="#" class="S">S</a></li> \n\
<li><a href="#" class="T">T</a></li> \n\
<li><a href="#" class="U">U</a></li> \n\
<li><a href="#" class="V">V</a></li> \n\
<li><a href="#" class="W">W</a></li> \n\
<li><a href="#" class="X">X</a></li> \n\
<li><a href="#" class="Y">Y</a></li> \n\
<li><a href="#" class="Z">Z</a></li></ul>';
var $links = $('ul#links');
$('div#lijst').html(ulOptions)
.children('li')
.addClass('all')
.filter('li:odd')
.addClass('odd');
$('#options li a').click(function() {
var $this = $(this),
type = $this.attr('class');
$links.children('li')
.removeClass('odd')
.hide()
.filter('.' + type)
.show()
.filter(':odd')
.addClass('odd');
return false;
});
});