show/hide single div with multiple links

show/hide single div with multiple links

I am getting to know jquery a little, and I am trying hide and show a div when a link is clicked. 
I have a page setup that has a flash video in a div on the main page.  Then when a link is clicked, a lightbox window opens and plays another video.  I am trying to get the video on the main page to hide while the lightbox video is playing.  Then when a user closes the lightbox window, the div with the main video on the page is shown and starts playing again.

So far I can get this to work with one link.  But I cannot get the main video div to hide when a second link is clicked.

Not too sure if I am using the correct function/calls/code/etc...

Here is my code that is on the main page:
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Link video test</title>
  7. <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
  9. <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body>
  12. <div id="hide">
  13.   <embed src="RT-infomercial.swf" width="340" height="250" wmode="transparent"></embed>
  14. </div>
  15. <br />
  16. <br />
  17. <strong>Links</strong><br />
  18. <a href="RT-infomercial.swf?width=340&amp;height=250" rel="prettyPhoto" title="Flash 10 demo" id="hidr">Test Link 1</a><br />
  19. <a href="RT-infomercial.swf?width=340&amp;height=250" rel="prettyPhoto" title="Flash 10 demo" id="hidr">Test Link 2</a>
  20. <br />
  21. <br />
  22. <script type="text/javascript" charset="utf-8">
  23. $(document).ready(function(){
  24. $("a[rel^='prettyPhoto']").prettyPhoto();
  25. });
  26. </script>
  27.     
  28. <script type="text/javascript" charset="utf-8">
  29.     $("#hidr").click(function () {
  30.       $("#hide").hide();
  31.     });

  33. </script>
  34. </body>
  35. </html>

Here is a link to the test page that I am attempting to get a working demo on:

FYI - Mute you speakers.  The video is set to run automatically and will drive you bonkers after a while.


Any help is greatly appreciated!  Thanks!