Toggle div below elements

Toggle div below elements

Hi, I, like many of us here, am new to JQuery and its wonders. 
 
While trying to implement the toggle/hide function, i find that the new <div> that I open falls below my <h2> tag.
 
Is this simply a browser compatability problem?  If this has aleady been discussed/answer, please provide a link or discussion topic that i may review.
 
<body>
<button id='logButton'>Log</button>
<div id='logBlock' style='display:none'>  my log </div>
<h2>Header</h2>
<div id='bodyContent'>Body Content</div>
 
----
$(document).ready(function(){
 $('#logButton').click(function() { 
  $('#logBlock').toggle('slow');
 });
----



 
Clicking the log button does open the log div as it should, but the H2 element is displayed on top of the log.  I find that stripping the H2 tag makes the log appear above it.
 
Please let me know if there is more info required before you can offer any assistance, any would be greatly appreciated.
-------
I found that moving the 'logBlock' below below the rest of the pages content, it loads fine, but putting at the top doesn't.
 
Again, any comments/education on this would be most appreciated