repeated jquery show/hide

repeated jquery show/hide

Hello,

I'm trying to do what I think is a simple thing but I don't know what I'm doing wrong.

Here's what I want to do:

1. Have a link (p.advert a.toggle) inside p.advert that tells p.hidden to show itself and at the same moment hides that link (p.advert a.toggle).
2. p.hidden must be closed by a link within himself.
3. When I close p.hidden, I need p.advert a.toggle to become visible so that the user can see p.hidden again by clicking on p.advert a.toggle.
4. The code must be reusable many times on the same page.

At the moment I can't get point 3 to work.

  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. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  7. <script type="text/javascript">
  8.   // You may specify partial version numbers, such as "1" or "1.3",
  9.   //  with the same result. Doing so will automatically load the
  10.   //  latest version matching that partial revision pattern
  11.   //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.2).
  12.   google.load("jquery", "1.4.2");
  13.  
  14.   google.setOnLoadCallback(function() {
  15.     // Place init code here instead of $(document).ready()
  16.   });
  17. </script>
  18. <script>
  19. $(document).ready(function() {
  20.   $('div.hidden').hide();
  21.  
  22.   $('div.show p.advert a.toggle').click(function() {
  23.     $('div.show div.hidden').show('fast');
  24.     $(this).hide();
  25.   });
  26.   $('div.show div.hidden a.toggle').click(function() {
  27.        $(this).parent().hide('fast');
  28.     $('div.show p.advert a.toggle').show();
  29.   });
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <div class="show">
  35.               <p class="advert">Sed ut perspiciatis voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?&nbsp;<a class="toggle">read more <img src="img/+.gif" /></a></p>
                <div class="hidden">
                  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aper. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?&nbsp;<a class="toggle">less <img src="img/-.gif" /></a></p>

  36.   </div>
  37. </div>
  38. </body>
  39. </html>

Thank you so much for any help