Using a jquery toggle...help

Using a jquery toggle...help

Basically, I'd like to use a jquery toggle. I've got 3 columns, and I'd like them all to toggle. The first two slide to the left fine, but the 3rd one goes upwards. Any ideas? All divs have the same properties (apart from names)

Here's the code anyway. Thanks in advance


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="file:///H|/portfolio3/css/styles.css" rel="stylesheet" type="text/css" />

  7. <script type="text/javascript" src="../js/execute.js"></script>
  8. <script type="text/javascript" src="../js/jquery.js"></script>
  9. <script type="text/javascript" src="../js/toggle.js"></script>
  10. <script type="text/javascript" src="../js/jquery-1.7.js"></script>



  11.   
  12. </head>

  13. <body>




  14. <div id="illustration-toggle"> <b>slick-show</b></div>

  15. <div id="logo-toggle"> <b>logo</b></div>

  16. <div id="web-toggle"> <b>web</b></div>

  17. <br />



  18. <div id="illustration"> illustration <br /> illustration <br />illustration <br /></div>

  19. <div id="logo"> logo <br /> logo <br /> logo </div>

  20. <div id="web"> logo <br /> logo <br /> logo </div>



  21. <br class="clear"/> 


  22. </body>
  23. </html>



  1. $(document).ready(function() {
  2.  // shows the slickbox as soon as the DOM is ready (a little sooner that page load)
  3.   $('#illustration').show();
  4.   
  5.   

  6.     
  7.   $('#illustration-toggle').click(function() {
  8.     $('#illustration').toggle(400);
  9.     return false;
  10.   });
  11.   
  12. //logo
  13. $('#logo').show();
  14. $('#logo-toggle').click(function() {
  15.     $('#logo').toggle(400);
  16.     return false;
  17.   });   

  18. //web
  19. $('#web').show();
  20. $('#web-toggle').click(function() {
  21.     $('#web').toggle(400);
  22.     return false;
  23.   }); 


  24. });