Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide one div, while showing another one

    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&aacute;gina en espa&ntilde;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>

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    You are missing the closing tag of the "ed_eng" DIV.
    Code:
    <div class="ed_eng">
    .....
    </div>
    <div class="ed_span">
    I am still learning English


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •