Layout and jQuery animate help

Layout and jQuery animate help

Hi everyone,

I want to make a collapsible horizontal menu with an arrow in front.
So if the menu is collapsed, the arrow points down (here I used "Y") and when it isn't collapsed the arrow points to the right (here I used "X").

The problem is: how do I make the collapsed div disappear when I click it and let the arrow animate to point right and let the uncollapsed div appear?
Problem 2: I can't get the two divs in the right place, they appear above eachother.

The CSS:
div#Menu {
   width: 805px;
   height: 47px;
   margin-left: 69px;
   font-size: 30px;
   color: #D95204;
   margin-top: 20px;
}

div#Menu ul.Uitgeklapt {
   list-style-type: none;
   white-space: 10px;
   white-space: nowrap;
   margin-left: -40px;
   visibility: hidden;
   position: absolute;
   z-index: 3;
}

div#Menu ul.Ingeklapt {
   list-style-type: none;
   white-space: 10px;
   white-space: nowrap;
   margin-left: -40px;
   visibility: visible;
   position: absolute;
   z-index: 5;
}

div#Menu li {
   display: inline;
}

div#Menu li a:hover{
   text-decoration: underline;
   color: #B24203;
}

div#Menu li a{
   text-decoration: none;
   color: #D95204;
}


The HTML:
            <div id="Menu" class="cufon">
           
               <ul class="Uitgeklapt">
               
               <li><a href="#" class="Inklappen">X</a></li>               
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Agenda</a></li>
                  <li><a href="#">Biografie</a></li>
                  <li><a href="#">Foto’s</a></li>
                  <li><a href="#">Repertoire</a></li>
                  <li><a href="#">Gastenboek</a></li>
                  <li><a href="#">Links</a></li>
                  <li><a href="#">Contact</a></li>
                   
               </ul>
               
                <ul class="Ingeklapt">
               
                   <li><a href="#" class="Uitklappen">Y</a></li>
                  <li><a href="#" class="Uitklappen">Menu</a></li>
                   
               </ul>
               
            </div>
           
        </div>


The jQuery code I have now:
   $(document).ready(function() {
      
      $("a.Uitklappen").bind("click", function(){ $("ul.Ingeklapt").fadeOut("slow"); });
      $("a.Uitklappen").bind("click", function(){ $("ul.Uitgeklapt").fadeIn("slow"); });
      $("a.Uitklappen").bind("click", function(){ $("ul.Ingeklapt").css({'visibility' : "hidden"}); });
      $("a.Uitklappen").bind("click", function(){ $("ul.Uitgeklapt").css({'visibility' : "visible"}); });
      
      $("a.Inklappen").bind("click", function(){ $("ul.Ingeklapt").fadeIn("slow"); });
      $("a.Inklappen").bind("click", function(){ $("ul.Uitgeklapt").fadeOut("slow"); });
      $("a.Inklappen").bind("click", function(){ $("ul.Ingeklapt").css({'visibility' : "visible"}); });
      $("a.Inklappen").bind("click", function(){ $("ul.Uitgeklapt").css({'visibility' : "hiddene"}); });
      
   });


I hope you can help me!

Best regards,
larsm