Hi
I have been attempting to make a two tabs menu that when clicked slides up and then slides down when clicked again. My example is the menu used on www.hunterandsand.com and my running code can be seen on www.musidoraland.co.uk. I have ground to a halt with my coding which I just can't manage to make work. Any help would be extremely helpful and thank you in advance.

HTML:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp's Corporate offers a unique service for clients wishing to design a special product for their business.">
<title>Beauchamp's Corporate</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#maximage').cycle({
		fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		speed: 1000,
		timeout: 7000,
        prev: '#arrow_left',
        next: '#arrow_right'
	});
	$(function() {
	    $('.page').hide();
	    $('#menu li').click(
	        function() {
	            
	            var content_id = $(this).attr('id');
	            
	            $('#menu li').addClass('off');
	            $(this).removeClass('off');
	            
	            if ($('.page').is(':visible')) 
	            {
	                $('.page').hide();
	                $('.'+content_id).show();
	            }
	            else
	            {
	                $('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });

        	            //console.log($(this).attr('id'));
        	        $('.'+content_id).show();
	            }
	            
	            
	           
	        });
	});
});
</script>
<body>
        
<div id="logo"><img src="images/logo1.jpg" alt="Beauchamp's Corporate"></div>
        
        <div id="cycle-loader">
         </div>   
		
        <div id="maximage">
            <img src="images/boat1.jpg" alt="" />
            <img src="images/car1.jpg" alt="" />
            <img src="images/dock1.jpg" alt="" />
            <img src="images/glass1.jpg" alt="" />
            <img src="images/hotel1.jpg" alt="" />   
            <img src="images/table1.jpg" alt="" />         
        </div>
		
	    <a href="" id="arrow_left" class="button" title="Previous Photo"></a>
        
        <a href="" id="arrow_right" class="button" title="Next Photo"></a>  

<div id="pages">
            
            <div id="nav">
                
                <ul id="menu">
                    <li id="services">Our Product</li>
                    <li id="contact">Contact Us</li>
                </ul>
            
            </div>
            
            <div id="content">
                
                <div id="copy">
                    
                    <div class="page product">

                        <p>We offer a consultation meeting in which we discuss client requirements, design ideas, packaging options, budgets, lead times and more...
							<br />
                        We have a number of designs already in production which we can edit & brand with the client logo or...
							<br />
                        Following this initial meeting, we produce product drawings, quotes, source leather samples and materials specific to this product. Samples can be produced once drawings have been approved by the client.
							<br />
                        Lead times, delivery schedules and product prices are unique to the client and indervidually calculated according to the specific client reqirements.
							<br />
                        Where possible Beauchamp's aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>
                                                
                    </div>
                    
                    <div class="page contact">
                    
                        
                        <p>For further information:
							<br />
						Email: <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
							<br />
						Address: 35 Bruton Street, London, W1J 6QY 
							<br />
						Website: <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
							<br />
						Fashion Accessories Website: <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>
                        
                    </div>
                    
                </div>
                
            </div>
            
            
        </div>		

</body>
</html>
CSS:
Code:
#logo{
width:180px;
height:113px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
}

a.button {
    display:block;
    width:50px;
    height:50px;
    margin-top:200px;
	opacity: 0.6%;
	}

a#arrow_left{
    float:left;
    background: transparent url('../images/arrowleft1.jpg') no-repeat;
	position: relative;
	z-index: 100;
}

a#arrow_right{
    float:right;
    background: transparent url('../images/arrowright1.jpg') no-repeat;
	position: relative;
	z-index: 100;
}

#maximage { 
height: 100%; 
width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000; 
 }
#maximage img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;	
}
#pages {
    margin:0 auto;
    width:100%;
    bottom:0;
    position:fixed;
    text-align:center;
    height:40px;
}

#pages #content {
    background: transparent url(/images/tran.png) repeat;
    padding:40px 0 120px 0;
}

#copy {
    width:368px;
    margin:0 auto;
    overflow:hidden;
}
p, li {
    text-align:left;
    font-family:'Buenard', serif;
    font-size:14px;
    line-height:18px;
    color:#333;
    margin:0 0 20px 0;
}

li {
    margin:0;
    padding:5px 59px 7px 58px;
}
#nav {
    margin:10px auto 0 auto;
    width:912px;
    padding:;
    text-align:center;
    overflow:hidden;
}
#menu {
    clear:both;
    width:369px;
    margin:0 auto;
}

#menu li {
    float:left;
    width:auto;
    background: transparent url(/images/tran.png) repeat;
    margin-right:1px;
    cursor:pointer;
}

#menu li#contact {
    margin:0;
}

#menu li.off {
    background: transparent url(/images/tran_black.png) repeat;
    color:#fff;
}
#nav {
    width:368px;
}

#nav .circle {
    float:left;
    
}

#nav .left{
    margin-right:10px;
}

#nav .right{
    margin-left:10px;
}

#nav .down a {
    margin:0 auto 20px auto;
    display:block;
    height:31px;
    width:30px;
}