Hello friends. What am I doing wrong, please?

Hello friends. What am I doing wrong, please?

This effect is well jsfiddle: http://jsfiddle.net/EhJfn/49/
But in a full page does not work.
What am I doing wrong, please?

Full page:

  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>button</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  7. <script>
  8. function noPropagate(event) {
  9.     event.stopPropagation();
  10. }
  11. $('.btn').on('click').then(noPropagate)
  12.     .siblings('.btn.active').click().end()
  13.     .toggleClass('active')
  14.     .next().slideToggle();
  15. $('.content').click(false);
  16. $(document).on('click ')
  17.     .$('.content').slideUp()
  18.     .$('.btn').removeClass('active');
  19. </script>
  20. <style type="text/css">
  21. .btn {
  22.     font-size:24px;   
  23. }
  24. #button1{
  25.     margin-left:110px;   
  26. }
  27. #button2{  
  28.     margin-left:100px;   
  29. }
  30. .content {
  31.     position: absolute;   
  32.     text-align: center;
  33.     display: none;     
  34. }
  35. #content1{  
  36.     height:200px;
  37.     width:300px;
  38.     background-color:#F0F;
  39. }
  40. #content2{   
  41.     height:200px;
  42.     width:400px;
  43.     margin-left:100px;
  44.     background-color:#0F0;
  45. }
  46. .active {
  47.     background-color:#D8D8D8;      
  48. }
  49. .btn:hover {
  50.     text-decoration: underline;
  51.     background-color:#D8D8D8;
  52. }
  53. .active + .content {
  54.     z-index: 2;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <a class="btn" href="#" id="button1">Button1</a>
  60. <div class="content" id="content1">
  61.      Content 1                    
  62. </div>
  63. <a class="btn" href="#" id="button2">Button2</a>
  64. <div class="content" id="content2">
  65.      Content 2                    
  66. </div>
  67. </body>
  68. </html>