I'm having a bit of a problem getting the digital traditional flash and contact info to show when i click on the animated slide menu.... i think its my style's and body and how im calling them from the java script, in the body tag... a little guidance would be nice :)

thanks
ardillo

/*
// start of div reaction//
<script type="text/javascript" >
jQuery(document).ready(function($){		   
			$("#a1").addClass("active").css({left:"75px"});
			$("#digital").hide();
			$("#traditional").hide();
			$("#flash").hide();
			$("#contact").hide();
			$("#workContainer").hide();
			
			$("a[class!='link']").click(function(){
				return false;
			});
			
			$("a:eq(0)").click(function(){
				if($("#a1").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#a1").animate({ left: '0', opacity: "show"}, 800).addClass("active");
				});
			});
			
			$("a:eq(1)").click(function(){
				if($("#digital").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675px", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#digital").animate({ left: '0', opacity: "show"}, 800).addClass("active");
					$("#workContainer").animate({ left: '0', opacity: "show"}, 800);
				});
			});
			
			$("#nav a[class!='work']").click(function(){
				$("#workContainer").animate({ left: '175', opacity: "hide"}, 800);
			});
			
			$("a:eq(2)").click(function(){
				if($("#traditional").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#traditional").animate({ left: '0', opacity: "show"}, 800).addClass("active");
				});
			});
			
			$("a:eq(3)").click(function(){
				if($("#contact").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#contact").animate({ left: '0', opacity: "show"}, 800).addClass("active");
				});
			});
			
			//----------------------SCROLL TO------------------
			
			$("#workContainer a:eq(0)").click(function(){ $('#item').scrollTo('li:eq(0)', 800); });
			$("#workContainer a:eq(1)").click(function(){ $('#item').scrollTo('li:eq(1)', 800); });
			$("#workContainer a:eq(2)").click(function(){ $('#item').scrollTo('li:eq(2)', 800); });
			$("#workContainer a:eq(3)").click(function(){ $('#item').scrollTo('li:eq(3)', 800); });
			$("#workContainer a:eq(4)").click(function(){ $('#item').scrollTo('li:eq(4)', 800); });
			$("#workContainer a:eq(5)").click(function(){ $('#item').scrollTo('li:eq(5)', 
//end//

//start of main menu slide open//			
$(document).ready(function(){
    lastBlock = $("#digital");
    maxWidth = 210;
    minWidth = 75;	

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
	$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
	lastBlock = this;
      }
    );

			
});
</script>
<style>
ul{
  list-style: none;
  padding: 0;
  float:right;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
  background:url(greymenubg.jpg) no-repeat;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
  background:#FFFFFF;
}

#digital{
  width: 70px;
  background-color:#FFFFFF;
}

ul li img{
  position: absolute;
  border: none;
  width:70px
}

ul li p{
  width:70px;
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
  background-color:#999999;
  color:#FFFFFF;
}
.span {
	color:#CCCCCC;
	cursor:pointer;
	}
div {  
  float:right;
  background-image:url(greymenubg);
  
  }

</style>
<body>
<div id="digital"</div>
<div id="traditional"</div>
<div id="flash" </div>
<div id="contact=" </div>
<ul id="a1" style="position:absolute;">
  <li>
    <a id="digital"><img src="d.png" width="30" height="47"/>
    
      <p>
	 
     	<strong>DIGITAL</strong><br/>
	</p>
    </a>  </li>
  <li>
    <a id="traditional"><span><img src="t.png" width="30" height="47"/></span>
	
       <p>
         <strong>TRADITIONAL</strong><br/></p>
  </a></li>
  <li>
    <a id="flash"><span><img src="fla.png" width="101" height="47"/></span>
      <p>
        <strong>FLASH 3.0/2.0</strong><br/>
    </p>
    </a></li>
</ul>

</body>
   	
*/

Please note that Java and Javascript are not the same thing. Flagging to see if this can be moved over to the Javascript forum.