Drilldown navigation menu by replacing divs

I made an attempt at a menu, that comprises of just replacing `s by showing and hiding. Kind of like a drill-down technique. I have the feeling that it is extremely long-winded. Can anyone offer a cleaner technique?



$(document).ready(function () {
$('.first').show();
$('.second, .all, .seventh, .sixth').hide();

$('.first').click(function () {
$('.first, .second').hide();
$('.second').show();
return false;
});
});

$('.third').click(function () {
$('.second').hide();
$('.all, .seventh').show();
return false;
});

$('.forth').click(function () {
$('.second').hide();
$('.sixth,.eighth').show();
return false;
});

$('.fifth').click(function () {
$('.fifth, .sixth').hide();
$('.second').show();
return false;
});

$('.nineth').click(function () {
$('.seventh, .nineth').hide();
$('.second').show();
return false;
});

$('.eighth').click(function () {
$('.sixth, .fifth').hide();
$('.second').show();
return false;
});
table {
text-align:center;
width:80%;
cursor:pointer;
}
tr {
width:50%;
background:red;
}
Choose a Department




Technology


Vehicles







Headphones




Watches




Back






Engine-Powered


Human-Powered



Back


Top



`

By dropping in some generic classes and data attributes like so:

Choose a Department

    
        
            
                Technology
            
            
                Vehicles
            
        
    

menuContainer marks everywhere that's needs to be hidden or shown

menuItem marks everything links somewhere else in the menu

data-target is your link data

Now you can reduce your javascript to this:

$(document).ready(function () {
    $('.menuContainer').hide();
    $('.first').show();

    $('.menuItem').click(function () {
        var target = $(this).attr("data-target")
        if(target){
            $('.menuContainer').hide();
            $('.'+target).show();
        }
        return false;
    });
});

StackExchange Code Review Q#98849, answer score: 3