affecting only one div

affecting only one div

Hi,

I want 2 divs, 2 to permanently show, the other only when a button is clicked. The bottom div must slide down when the top one appears and slides in. However i created the following code, and the bottom div isnt showing at all. Or yes it is, 1 in 5 refreshes, the other 4 it just doesnt show. I created the line
$("div.divblok2").show();
myself because otherwise the bottom div never showed. I dont understand why because in my code I only affect the top div right?

Greetings.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function(){
        
   $(document.body).click(function () {
      
      if ($("div.divblok1").is(":hidden")) {
        $("div.divblok1").slideDown("slow");
      } else {
        $("div.divblok1").hide();
      }
    });
   
$("div.divblok2").show();
     });
     
   </script>
   <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen,projection" />
</head>
<body>
   click me!
   
<div class="divblok1">
   <a href="http://jquery.com/">jQuery</a>
</div>
<div class="divblok2">
   Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
   Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
   Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
   Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
   Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
</div>

</html>