Jquery pb d'affichage avec une div

Bonjour a tous!

ca fais deja 2 jours que je galère avec ce code! je suis pas encore pro avec le jquery alors un peu d'aide serait la bienvenue.

Mon probleme est simple, je veux que lorsque qu'on arrive sur le site se soit "galery" qui soit visible et lorsque l'on clique sur "accueil", que la div "galery" apparaisse.
J'ai fais des test avec d'autres div (contenucontact)et ca fonctionne, la seule difference c'est que "galery" contient un slider. Le probleme viendrait il de la?

voila mon code:

<div id="menuhaut">
        <div id="accueil"><a href="#" id="accueil">ACCUEIL</a></div>
            <div id="contact"><a href="#" id="contact">CONTACT</a></div>
    </div>
            <div id="deco"></div>

<div id="conteneur">
	<div id="menuprincipal">
                            
                                <ul>
                                    <li><a href="#" title="visite">VISITE</a></li>
                                    <li><a href="#" title="vn">VEHICULES NEUFS</a></li>
                                    <li><a href="#" title="vo">VEHICULES D'OCCASION</a></li>
                                    <li><a href="#" title="atelier">ATELIER</a></li>
                                </ul>
                                
                           
    </div>
    
	<div id="contenu">
                  
              
          <div>
              
              <p class="atelier">en construction</p>
          </div>
          
          <div>
              
              <p>bla bla bla</p>
          </div>
          
          <div>
              
              <p>blablabla </p>
          </div>
          
          <div>
              
              <p class="atelier">blablabla</p>
          </div>
	
            <div id="contenucontact">
            <p>blablabla</p>
            </div>  
            
            <div id="galery">
                    <div id="slider" class="nivoSlider theme-default">
                <img src="img_voit/img1.jpg" width="711" height="350" />
                <img src="img_voit/img2.jpg" width="711" height="350"  />
                <img src="img_voit/img3.jpg" width="711" height="350"  />
                <img src="img_voit/img4.jpg" width="711" height="350"  />
                
                    </div>
            </div>       
            
            
 
</div>


</div>        

et le javascript:

$('#conteneur').fadeIn(500);
			
			$('#galery').fadeIn(500);
			//voila ce qui ne marche pas
			
		
		
		$('#menuprincipal ul li a').click(function(e) {
			var position = $(this).parent().index();
			$('#galery div:visible').fadeOut(500);
            $('#contenu div:visible').fadeOut(500);
			
			$('#contenu div:eq('+position+')').delay(500).fadeIn();
			$('#menuprincipal ul li a').removeClass('actif');
			$(this).addClass('actif');
        });
		
	$('#contact').click(function(e) 
		
    { 

        $('#contenu div:visible').fadeOut(500); 
		$('#galery div:visible').fadeOut();
		$('#contenucontact').delay(500).fadeIn(500);
		$('#menuprincipal ul li a').removeClass('actif');

	
	});	
	$('#accueil').click(function(e) 
		
    { 

        $('#contenu div:visible').fadeOut(500); 
		$('#galery').delay(500).fadeIn(500);
		$('#menuprincipal ul li a').removeClass('actif');

	
	});	
	$('#footercontact').click(function(e) 
		
    { 

        $('#contenu div:visible').fadeOut(500); 
		$('#contenucontact').delay(500).fadeIn(500);
		$('#menuprincipal ul li a').removeClass('actif');

	
	});	
	 
	 $('#slider').nivoSlider();

    });

merci d'avance