three level selector

by SebastianPataneMasuelli

HTML

<ul id="vertical">
    <li class="selected" rel="vertical_1">Vertical 1</li>
    <li rel="vertical_2">Vertical 2</li>
</ul>
<ul id="" class="topic active" rel="vertical_1">
    <li class="selected" rel="topic_1">Topic 1</li>
    <li rel="topic_2">Topic 2</li>
</ul>
<ul id="" class="topic hidden" rel="vertical_2">
    <li rel="topic_3">Topic 3</li>
    <li rel="topic_4">Topic 4</li>
</ul>
<ul id="" class="category active" rel="topic_1">
    <li rel="cat_1">Category 1</li>
    <li rel="cat_2">Category 2</li>
</ul>
<ul id="" class="category hidden" rel="topic_2">
    <li rel="cat_3">Category 3</li>
    <li rel="cat_4">Category 4</li>
</ul>
<ul id="" class="category hidden" rel="topic_3">
    <li rel="cat_5">Category 5</li>
    <li rel="cat_6">Category 6</li>
</ul>
<ul id="" class="category hidden" rel="topic_4">
    <li rel="cat_7">Category 7</li>
    <li rel="cat_8">Category 8</li>
</ul>
<ul id="selected" class="">
</ul>

<p>notes: once topics or categories are loaded, do not remove</p>

CSS

ul {width: 120px; float: left; border: 1px solid red}

.hidden {display: none; }
.disabled { color: SteelBlue; opacity: .35; }
.remove_btn {float: right; color: red }

.selected {color: white; background: none SteelBlue}
.active {border: 1px solid blue;}

p {clear: left; margin-top: 100px}

JavaScript

var related_topic, related_category, remove_btn;

/*** vertical selection below ***/
$('#vertical li').bind('click', function(){
    $('#vertical li.selected').removeClass('selected');
    $(this).addClass('selected');
    //hide active topic ul, show related_topic ul
    $('ul.topic.active').removeClass('active').hide();
    related_topic = $(this).attr('rel');
    $('ul.topic[rel="' + related_topic + '"]').addClass('active').show();
    // hide active cat ul
    $('ul.category.active').removeClass('active').hide();
    //select and load categories first topic?
    related_category = $('ul.topic[rel="' + related_topic + '"] li.selected').removeClass('selected');
    related_category = $('ul.topic[rel="' + related_topic + '"] li').first().addClass('selected');
    related_category = $('ul.topic[rel="' + related_topic + '"] li').first().attr('rel');
    $('ul.category[rel="' + related_category + '"]').addClass('active').show();
});

/*** topic selection below ***/
$('.topic li').bind('click', function(){
    $('.topic li.selected').removeClass('selected');
    $(this).addClass('selected');
    // hide active cat ul
    $('ul.category.active').removeClass('active').hide();
    //select and load categories for each topic
    related_category = $(this).attr('rel');
    $('ul.category[rel="' + related_category + '"]').addClass('active').show();
});

/*** category selection and removal below ***/
//handles clicks so that we can re-bind them
var clickHandler = function() {
    remove_btn = '<span class="remove_btn">x</span>';
    $(this).clone().prepend(remove_btn).appendTo('#selected');
    $(this).unbind('click').addClass('disabled');
};
//select category 
$('.category li').bind('click', clickHandler);

//remove action
$('.remove_btn').live('click', function() {
    var related_li = $(this).parent().attr('rel');
    //remove, restore original, restore bind
    $(this).parent('li').remove();
    $('.category li[rel="' + related_li +...