Jquery- Fading Menu – Replacing Content

JavaScript
1

Hi,

I’m trying to change content depending on the <a> link the user clicks, please see the page:
http://www.alexanderlloyd.info/sennheiser/auriculares_.html (Note this page does not have the final code I have pasted below, it’s just so you can see what I mean)

ie. when they click on MX85 these earphones replace the ones that are currently displayed and the same for the rest of the links: My code is far is as follows but isn’t working, any help please?


HTML

<div id="content">
      	<div id="cx300">
    				<div class="auriculares_spec_mx560">
           		<h2>cx300</h2>
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna.</p>
            </div>
            <img class="img_cx300" src="img/cx300.jpg" alt="Sennheiser Headphones CX300"/>
				</div>
				<div id="mx85">
    				<div class="auriculares_spec_mx85">
           		<h2>MX85</h2>
            	<p>Lorem ipsum dolor sit amet, ...</p>
            </div>
            <img class="img_mx85" src="img/mx85.png" alt="Sennheiser Headphones MX85"/>
				</div>
				<div id="mx560">
    				<div class="auriculares_spec_mx560">
           		<h2>MX560</h2>
            	<p>Lorem ipsum dolor sit amet, ....</p>
            </div>
            <img class="img_mx560" src="img/mx560.png" alt="Sennheiser Headphones MX560"/>
				</div>
				<div id="pmx80">
    				<div class="auriculares_spec_pmx80">
           		<h2>PMX80</h2>
            	<p>Lorem ipsum dolor sit amet, ...</p>
            </div>
            <img class="img_pmx80" src="img/pmx80.png" alt="Sennheiser Headphones pmx80"/>
				</div>
				<h1>Auriculares</h1>
     	   <div id="menu_auriculares">
        	<h3>Aud&#237;fonos bot&#243;n</h3>
        	<ul id="list_aurs">
        		  <li><a id="mx560-button" href="#">CX 300</a></li>
            	<li><a id="mx85-button" href="#">MX 85</a></li>
            	<li><a id="mx560-button" href="#">MX 560</a></li>
            	<li><a id="pmx80-button" href="#">PMX 80</a></li>
        	</ul>

CSS

#cx300{
	float:right;
	width:600px;
}

#mx85{
	float:right;
	width:600px;
	display:none;
}

#mx560{
	float:right;
	width:600px;
	display:none;
}

#pmx80{
	float:right;
	width:600px;
	display:none;
}

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
	$(function(){
		$("#list_aurs li a").click(function(){
		
		$clicked = $(this);
				

					var idToLoad = $clicked.attr("id").split('-');
					//we search trough the content for the visible div and we fade it out
					$("#content").find("div:visible").fadeOut("fast", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
					})
				}
			}
				
	</script>

Would really appreciate the help! Thanks ever so much! BTW I’m a noob so there is probably an elementary error somewhere!