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