Hide Div Until Link Is Selected

I have a hide/show navigation working but can't seem to figure out how to hide the main div that contains all the children divs until one of the links in the navigation is selected

Solution 1:

Just hide the div initially then show it when an item is clicked

$('body').on('click','nav a', function(e) {
    $('#main').css('display', 'block');
    $('#main').children().addClass('hide');
    $($(this).attr('href')).removeClass('hide');
    e.preventDefault();
});

#main{
    display:none;
}

DEMO

Solution 2:

I've updated your fiddle;

http://jsfiddle.net/KptZ6/2/

If you don't want to change the HTML, the following will hide the main div using javascript. It also hides the children the same way (using .hide())

http://jsfiddle.net/KptZ6/5/

$(function() {
    $('#main').hide();
});

$('body').on('click','nav a', function(e) {
    $('#main').show();
    $('#main').children().hide();
    $($(this).attr('href')).show();
    e.preventDefault();
});​

Solution 3:

not sure if you want something like this, here is an update:

http://jsfiddle.net/KptZ6/3/