Drilldown navigation menu by replacing divs I made an attempt at a menu, that comprises of just replacing &lt;div&gt;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;
}
&lt;div class="first"&gt;Choose a Department&lt;/div&gt;
&lt;div class="second"&gt;
    &lt;table class="Menu"&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;div class="third"&gt;Technology&lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;div class="forth"&gt;Vehicles&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;div class="seventh"&gt;
    &lt;table class="Menu"&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;div class="all"&gt;&lt;a&gt;Headphones&lt;/a&gt;

                &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;div class="all"&gt;&lt;a&gt;Watches&lt;/a&gt;

                &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;div class="nineth"&gt;Back&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;div class="sixth"&gt;
    &lt;table class="Menu"&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;a&gt;Engine-Powered&lt;/a&gt;

            &lt;/td&gt;
            &lt;td&gt;&lt;a&gt;Human-Powered&lt;/a&gt;

            &lt;/td&gt;
            &lt;td&gt;
                &lt;div class="fifth"&gt;Back&lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;div class="eighth"&gt;Top&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;
By dropping in some generic classes and data attributes like so:

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


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