Question

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.

Please see my fiddle: http://jsfiddle.net/blahblahAMYblah/KptZ6/

To be clear, I do not just want all the children divs (ie. about, gallery, etc.) hidden at the start, but the main div hidden. Once a link is selected, then the main div should show with only the selected child div showing as well.

Answer 1

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