if window location hash then click only executing partially

if window location hash then click only executing partially

I'm trying to use hashtags to show divs that are also shown by clicking
the in the navbar. (i'm using jquery instead of links for pages and i want
them directly linkable.)
For some reason it's only causing parts of the .click functions to happen!
???
here's my script (i'm new, i'm sure this is horribly inelegant but it's
getting the job done)
//Close
$('#close').click(function() {
$('#bio, #books, #extras, #news, #contact').fadeOut('slow');
$('.bio, .books, .extras, .news, .contact').removeClass('nav-selected');
$('#background').fadeTo('slow',1);
$('#close').fadeTo('slow',0);
window.location.hash = '';
});
//Title
$('#titlelink').click(function() {
$('#bio, #books, #extras, #news, #contact').fadeOut('slow');
$('.bio, .books, .extras, .news, .contact').removeClass('nav-selected');
$('#background').fadeTo('slow',1);
window.location.hash = '';
});
//Bio
$('.bio').click(function() {
$('#bio').fadeIn('slow');
$('.bio').addClass('nav-selected');
$('#books, #extras, #news, #contact').fadeOut('slow');
$('.books, .extras, .news, .contact').removeClass('nav-selected');
$('#background').fadeTo('slow', 1);
$('#title').fadeIn('slow');
$('#close').fadeTo('slow',0.8);
window.location.hash = 'bio';
});
//Books
$('.books').click(function() {
$('#bookswrap, #books').fadeIn('slow');
$('.books').addClass('nav-selected');
$('#bio, #extraswrap, #newswrap, #contact').fadeOut('slow');
$('.bio, .extras, .news, .contact').removeClass('nav-selected');
$('#background').fadeTo('slow', 0.2);
$('#close').fadeTo('slow',0.8);
window.location.hash = 'books';
});
//Extras
$('.extras').click(function() {
$('#extraswrap, #extras').fadeIn('slow');
$('.extras').addClass('nav-selected');
$('#bio, #bookswrap, #newswrap, #contact').fadeOut('slow');
$('.bio, .books, .news, .contact').removeClass('nav-selected');
$('#background').fadeTo('slow', 0.2);
$('#title').fadeIn('slow');
$('#close').fadeTo('slow',0.8);
window.location.hash = 'extras';
});
//News
$('.news').click(function() {
$('#newswrap, #news').fadeIn('slow');
$('.news').addClass('nav-selected');
$('#bio, #bookswrap, #extraswrap, #contact').fadeOut('slow');
$('.bio, .books, .extras, .contact').removeClass('nav-selected');
$('#background').fadeTo('slow', 0.2);
$('#title').fadeIn('slow');
$('#close').fadeTo('slow',0.8);
window.location.hash = 'news';
});
//Magnus
$('.magnus').click(function() {
window.open('http://magnusflyte.com/');
});
//Contact
$('.contact').click(function() {
$('#contact').fadeIn('slow');
$('.contact').addClass('nav-selected');
$('#bio, #books, #extras, #news').fadeOut('slow');
$('.bio, .books, .extras, .news').removeClass('nav-selected');
$('#background').fadeTo('slow', 1);
$('#title').fadeIn('slow');
$('#close').fadeTo('slow',0.8);
window.location.hash = 'contact';
});
if(window.location.hash) {
$('.' + window.location.hash.substr(1)).click();
}
So when i reload the hash pages the background fades properly and the
classes are switched correctly but the divs (for example, #bookswrap,
#books) don't fade in.
Any ideas? I imagine it's something dumb cause I'm new to all this.