jQuery: Same Level remove class

Question

I have a navigation with 3 levels. If you click on one of the links it gets a class name depending on the level. Level 1 will have a class name "active1", level 2 "active2", level 3 "active3".

I manage to get the class name when clicked on, however the other class names get deleted as soon the on get clicked.

The Plan is.. if I click a link in the first Level the second Level will be shown and if I click a link in the second Level the third Level will be shown.

How can I solve this problem?

HTML:

<div id="nav">
<ul class="first">
    <li><a href="#" title="Nav" class="active">Link</a>
        <ul class="second">
            <li><a href="#" title="Sub Nav">Link 2</a>
                <ul class="third">
                    <li><a href="#" title="Sub Nav 2">Link 3</a></li>
                    <li><a href="#" title="Sub Nav 2">Link 3</a></li>
                </ul>
            </li>
            <li><a href="#" title="Sub Nav">Link 2</a></li>
            <li><a href="#" title="Sub Nav">Link 2</a></li>
        </ul>
    </li>
    <li><a href="#" title="Nav">Link</a></li>
    <li><a href="#" title="Nav">Link</a></li>
    <li><a href="#" title="Nav">Link</a></li>
</ul></div>

JS/jQuery

$('.first a').click(function() {
    if ($(this).hasClass('active')) {
        return false;
    } else if ($(this).not('active')) {
        $('.first').find('.active').removeClass('active');
        $(this).addClass('active');
    }
    return false;
});

$('.second a').click(function() {
    if ($(this).hasClass('active2')) {
        return false;
    } else if ($(this).not('active2')) {
        $('.second').find('.active2').removeClass('active2');
        $(this).addClass('active2');
    }
    return false;
});

$('.third a').click(function() {
    if ($(this).hasClass('active3')) {
        return false;
    } else if ($(this).not('active3')) {
        $('.second').find('.active3').removeClass('active3');
        $(this).addClass('active3');
    }
    return false;
});

Answer 1

Like this DEMO?: JS

$('#nav').on('click', 'a', function(){
 var nextul = ($(this).closest('li').children('ul'));
 nextul.toggle('slow');
});

CSS

.second, .third {display:none;}
.active{display:block;}