Something in jscript not working in firefox

Hi there.

Firstly I am new to Jquery and have been trying to get to grips with it, but its looking really good.

I have a collapsing panel which I am creating and using JQuery to change some class names to collapse of expand the panel.

I run the following on the page which runs in IE but not Firefox

I have attached a HTML file demonstrating the error

THe Jscript I am running is:

$(document).ready(function() {
         $("div.AgoraLiveCollapsingPanel").children(".HeaderRow").click(function() {
             //$(this).css("background-color", "blue");
             if ($(this).parent().hasClass("Expandable")) {
                 if ($(this).parent().hasClass("Collapsed")) {
                     $(this).parent().addClass("Expanded");
                     $(this).parent().removeClass("Collapsed");

                 }
                 else {
                     if ($(this).parent().hasClass("Expanded")) {
                         $(this).parent().addClass("Collapsed");
                         $(this).parent().removeClass("Expanded");
                     }
                 }
             }
         }); // End of .Click Function
     });  //End of .Ready function