Well I created a page that I want a large body of text to change languages when you click a link. Both bodies of text are in the source code, with the Spanish set to display:none and the English to display:block, and when I click on the link ''spanlink'' i want them to switch places.
Please help me out!
Here is my source code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="ed.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Product Details</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a#spanlink').click(
function(e){
e.preventDefault();
$('.ed_eng').fadeToggle(100);
$('.ed_span').fadeToggle(200);
$('a#span2').fadeToggle(200);
$(this).text(
function(){
if ($(this).text() == 'View Site in English'){
$(this).text('Ver página en español');
}
else if ($(this).text() == 'Ver página en español'){
$(this).text('View Site in English');
}
});
});
});
</script>
</head>
<body>
<div id="pic">
<a href="http://www.marketingsupportpr.com/epk/KBIS2006ePressKit/Photography/ExistingProducts/Faucets/Ferrara_LK7122.jpg" class = 'cloud-zoom' id='zoom1'
rel="adjustX: 47, adjustY:0, softFocus: false, position: 'right'" ><img src="../../Documents/Unnamed Site 3/814114-med.jpg" width="300" height="300" alt='Small Image' />
</a>
<noscript> <br /><br />
<a id="noscriptlink" href="http://www.marketingsupportpr.com/epk/KBIS2006ePressKit/Photography/ExistingProducts/Faucets/Ferrara_LK7122.jpg" style="margin-left:-40px;">Click Here For Full Product Image</a><br />
<noscript style="position:absolute; background-color:#CCCCCC; padding: 10px; margin-top:15px; margin-left: 10px;">This page requires javascript for all features</noscript>
<br />
<br />
<br />
<br />
</noscript>
</div>
<div class="ed_eng">
<div style="width: 350px; float:left; padding-top:10px; padding-left: 40px;">
<div id="title" style="font-weight:bold;font-size:1.3em;">8" Center Frampton Faucet</div>
<div>
<p>
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
</p>
<ul>
<li>This is a product detailreally really really lonng</li>
<li>This is a product detail.</li>
<li>This is a product detail.</li>
<li>This is a product detail.</li>
<li>This is a product detail.</li>
<li>This is a really really really really really long product detail, one that will take up a lot of space.</li>
<li>This is a really really really really really long product detail, one that will take up a lot of space.</li>
</ul>
<div style="position:relative; font-size:18px;">Price: <span class="red">$19.99</span></div>
</div>
</div>
<div class="ed_span">
<div id="span2" style="width: 350px; float:left; padding-top:10px; padding-left: 40px;">
<div id="title" style="font-weight:bold;font-size:1.3em;"> 8 "Centro de grifo Frampton </div>
<div>
<p>
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Mecenas tempus, tellus eget condimentum rhoncus, sem quam libero semper, sit amet adipiscing sem neque
</p>
<ul>
<li> Este es un producto muy, muy detailreally lonng </li>
<li> Este es un detalle del producto. </li>
<li> Este es un detalle del producto. </li>
<li> Este es un detalle del producto. </li>
<li> Este es un detalle del producto. </li>
<li> Este es un detalle de productos muy muy muy muy muy largo, que ocupará mucho espacio. </li>
<li> Este es un detalle de productos muy muy muy muy muy largo, que ocupará mucho espacio. </li>
</ul>
<div style="position:relative; font-size:18px;"> Precio: <span class="red"> $ 19.99 </span> </div>
</div>
</div>
</div>
<a href="#" id="spanlink">Ver página en español</a>
<br />
<script type="text/javascript">
<!--
document.write('<div id="hov"> <div id="hover"></div><a id="print" href="#" onClick="printpage(); return false;" style="float:left;">Print Page</a><a id="close" href="#" style="float:left;" onClick="parent.$.fancybox.close();">Close Window</a></div> ');
-->
</script>
<script type="text/javascript"><!--
document.getElementById(close).onclick('parent.$.fancybox.close();');
-->
</script>
<script type="text/javascript">
<!--
function printpage()
{
window.print();
}
-->
</script>
<script type="text/JavaScript" src="http://p.b5z.net/i/u/10145668/h/cloud-zoom.1.0.2.min.js"></script>
</body>
</html>
Before you post, read our: 
