IE6 doesn't like my simple jQuery: Any idea why?

The following piece of jQuery is used on a page which has a message at the top, and all the comments which reply to the message below it. The way the code works on IE8/Chrome/Firefox is it "collapses" all of the comments bellow the initial message, so just their subjects appear. Clicking their subjects then substitutes the initial message for the comment (i.e. it "fakes" the action of having each comment on its own page).

The problem is IE6 refuses to work with the code; when IE6 visitors land on the page, all of the comments refuse to collapse, and clicking headlines does nothing.

Does anyone have any idea how to correct this issue to make the JS ie6 compatible?

function flip(comment) {
$('#first-post').replaceWith(comment.closest(".comment").clone().attr('id','first-post'));
$('#first-post').children('.forumthreadtitle').children('.comment-info').empty();
$('#first-post').find(':hidden').fadeIn('slow');
$('html, body').animate({scrollTop:0}, 'fast');
return false;
}

$(document).ready(
function(){ 

$('.submitted').each(function() {
$(this).clone().addClass('comment-info').appendTo($(this).siblings('.forumthreadtitle'));
if(!$(this).parent('#first-post').html()) {
    $('#first-post').children('span.taxonomy').clone().appendTo($(this));
    }
});

$('.display_mode').html('Show All Replies');
expande开发者_Go百科dMode = false;
$('.display_mode').click(function() {
    if ( expandedMode  == false  ) {
        $('.forumthreadtitle').siblings().show(); 
        $(this).html('Collapse Replies');
        expandedMode  = true;
        }
    else
        {
        $('.forumthreadtitle').siblings().hide();
        $(this).html('Show All Replies');
        expandedMode = false; 
        }
    });

$('.forumthreadtitle').siblings().hide();

if(window.location.hash) {
        flip($(window.location.hash).next().children('.forumthreadtitle').show());
        }

$('.forumthreadtitle').click(function() { 
    pageTracker._trackPageview("/comment?page=" + document.location.pathname);
    flip($(this)); 
    } );
});

Here is some example HTML (Tried to simplify it a little to make it easier to understand):

<DIV id="first-post">
       <H2 class="title"><A href="test.html">TEST</A></H2>
      <SPAN class="submitted">Submitted by Big J on July 26, 2010 - 3:26pm</SPAN> 
  <DIV class="content">First Post</DIV>
</DIV>

<DIV id="comments">
  <A id="comment-1643951"></A>
<DIV class="comment comment-published clear-block">
  <H3 class="forumthreadtitle"><A href="test.html#comment-1643951" class="active">Test Reply....</A>
  <DIV class="submitted comment-info">Submitted by test on July 26, 2010 - 4:49pm.</DIV>
  </H3>

  <DIV class="content" style="display: none; ">
  Test Comment Content
  </DIV>
</DIV>
</DIV>

---

I would recommend you trying 2 things:

1. Use jQuery(function() { }) instead of $(document).ready(function() { });
2. Move your jQuery code to the bottom of the HTML page.