Fade in y Fade out con un clic

[BaSingSe]

Hola tengo un pequeño problemita y agradecería un montón a quien me ayude a resolverlo. Tengo un menú y quisiera que al cargar la pagina el primer menu presente la información sin que se le de clic.. pero que todos los demás menú allá que cliquear para que aparezca la info y mientras una aparece la otra se oculta.. Talvez se escuche complicado se que se hace con javascript pero no es mi fuerte aun estoy aprendiendo...

Solo logro hacer que aparesca al darle clic pero cuando cliqueo en otro este se queda a menos que lo clique otra vez para que desaparesca.. Me gustaria que apareciera al cargar la pagina y al cliquear otros que se esconda el primero y sucesivamente.

Código Javascript:

<script>
 $(document).ready(function(){
  $('#capa1').click(function(){
   $('.arrow-left').toggle('fade',500); 
  });
  $('#capa1').click(function(){
   $('#contenido').toggle('fade',500); 
  });
 });
 
  $(document).ready(function(){
  $('#capa2').click(function(){
   $('.arrow-left1').toggle('fade',500); 
  });
 });
 
 $(document).ready(function(){
  $('#capa3').click(function(){
   $('.arrow-left2').toggle('fade',500); 
  });
 });
 
 </script>
 

Código CSS:

<style>
#container { margin-left:auto; margin-right:auto; width:900px; }
#fondo{
    height:auto;
    width:900px;
    margin-left:auto;
    margin-right:auto; background-image:url(img/bg_yellow.jpg); background-repeat:no-repeat;
    position:absolute;z-index:1; background-color:#FFFFFF;  
}
 
ul{ list-style:none;}
 
 
.ballimg1{border-radius:180px; height:300px; width:300px; position:absolute; z-index:2;border:solid 8px #ffe200;margin-left:-105px; margin-top:90px}
.ballimg2{border-radius:180px; height:220px; width:220px; position:absolute; z-index:2;border:solid 8px #ffe200;margin-left:400px; margin-top:190px}
.ballimg3{border-radius:180px; height:220px; width:220px; position:absolute; z-index:2;border:solid 8px #ffe200;margin-left:645px; margin-top:160px}
 
.list{ position:absolute; z-index:5; margin-left:-60px; margin-top:210px;color:#FFFFFF; font-size:3.5em;}
.list1{ position:absolute; z-index:5; margin-left:470px; margin-top:275px;color:#FFFFFF; font-size:3.5em}
.list2{ position:absolute; z-index:5; margin-left:670px; margin-top:245px;color:#FFFFFF; font-size:3em}
 
ul li:hover{ color:#00CCFF; display:block; -webkit-filter: hue-rotate(0deg); /* Normal */
-webkit-filter: hue-rotate(180deg); /* Rotar la matriz 180 grados */
-webkit-filter: hue-rotate(260deg); /* Rotar la matriz 270 grados */
color:#FFFFFF;}
        
/*flechas*/
.arrow-left {   
   width: 0;
   height: 0;
   border-bottom:40px solid transparent;  /* left arrow slant */
   border-top: 40px solid transparent; /* right arrow slant */
   border-left: 120px solid #ffe200; /* bottom, add background color here */
   font-size: 0;
   line-height: 0;
   -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(70deg);
    position:absolute; margin-top:390px; margin-left:10px;
    z-index:1; display:none
}
 
.arrow-left1 {   
   width: 0;
   height: 0;
   border-bottom:30px solid transparent;  /* left arrow slant */
   border-top: 30px solid transparent; /* right arrow slant */
   border-left: 80px solid #ffe200; /* bottom, add background color here */
   font-size: 0;
   line-height: 0;
   -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    position:absolute; margin-top:420px; margin-left:480px;
    z-index:1;display:none;
}
 
.arrow-left2 {   
   width: 0;
   height: 0;
   border-bottom:30px solid transparent;  /* left arrow slant */
   border-top: 30px solid transparent; /* right arrow slant */
   border-left: 100px solid #ffe200; /* bottom, add background color here */
   font-size: 0;
   line-height: 0;
   -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    transform: rotate(130deg);
    position:absolute; margin-top:380px; margin-left:700px;
    z-index:1; display:none;    
}
 
/*Tamano de las listas*/
#con{ height:200px; width:200px; margin-top:20px}
 
/*Contenido*/
#contenido{
  height: 260px;
  opacity: 1;
  width: 690px;
  display:none;
  position:absolute; left:205px;  top:20px
}
 
</style>
 

Código HTML:

<body>
<div id="container">
   <div id="fondo">
    <ul class="menu">
    
        <div id="con"><li id="capa1"><img class="ballimg1" src="img/IMG_4598.JPG" />
        <span class="list">Restaurant</span> <div class="arrow-left"></div></li></div>
        
        <div id="con"><li id="capa2"><img class="ballimg2" src="img/IMG_4600.JPG" />
        <span class="list1">Bar</span> <div class="arrow-left1"></div></li></div>
        
        <div id="con"><li id="capa3"><img class="ballimg3" src="img/IMG_4602.JPG" />
        <span class="list2" id="dlist2">Timy Fast <br />&nbsp;&nbsp;&nbsp; Food</span><div class="arrow-left2"></div></li></div>
    </ul>
    
        <div id="contenido"><h1 class="header">Rivera Restaurant</h1></div>
    
        </div>
    
    
</div>
</body>
</html>
 

Si lo pueden visualizar en dreamweaver para que comprendan lo que quiero decir de antemano millon de gracias