Show part of content again which is hide()

Show part of content again which is hide()

Hello,

Is it possible with jQuery to show a part of the content again which is already hide?

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <style>
  6.   #div1 {
  7. float: left;
  8. border: 1px solid black;
  9. background-color: #EEEEEE;
  10. width: 200px;
  11. height: 200px;
  12.   }
  13.   #div2 {
  14. background-color: #FFFFFF;
  15. width: 100px;
  16. height: 100px;
  17.   }
  18.   </style>
  19.   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  20. </head>
  21. <body>
  22. <button id="hidr">Hide</button>
  23.   <button id="showr">Show</button>
  24.   <div id="div1">
  25. <div id="div2">
  26. Second div
  27. </div>
  28.   </div>
  29. <script>
  30.     $("#hidr").live('click', function () {
  31.       $("#div1").hide("fast");
  32.     });
  33.     $("#showr").live('click', function () {
  34.       $("#div2").show(2000);
  35.     });

  37. </script>

  39. </body>
  40. </html>

When I click on #hidr, #div1 is hide() like it should, but when I click on #showr, #div2 doesn't show up, probably because it is hide in div1.

Is there a workarround?

Christophe