Drilldown navigation menu by replacing divs

Question

I made an attempt at a menu, that comprises of just replacing <div>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;
}

<div class="first">Choose a Department</div>
<div class="second">
    <table class="Menu">
        <tr>
            <td>
                <div class="third">Technology</div>
            </td>
            <td>
                <div class="forth">Vehicles</div>
            </td>
        </tr>
    </table>
</div>
<div class="seventh">
    <table class="Menu">
        <tr>
            <td>
                <div class="all"><a>Headphones</a>

                </div>
            </td>
            <td>
                <div class="all"><a>Watches</a>

                </div>
            </td>
            <td>
                <div class="nineth">Back</div>
            </td>
        </tr>
    </table>
</div>
<div class="sixth">
    <table class="Menu">
        <tr>
            <td><a>Engine-Powered</a>

            </td>
            <td><a>Human-Powered</a>

            </td>
            <td>
                <div class="fifth">Back</div>
            </td>
            <td>
                <div class="eighth">Top</div>
            </td>
        </tr>
    </table>
</div>

Answer 1

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

<div class="menuItem menuContainer first" data-target="second">Choose a Department</div>
<div class="menuContainer second">
    <table class="Menu">
        <tr>
            <td>
                <div class="menuItem third" data-target="seventh">Technology</div>
            </td>
            <td>
                <div class="menuItem forth" data-target="sixth">Vehicles</div>
            </td>
        </tr>
    </table>
</div>

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;
    });
});