fadeIn, fadeOut working in IE, but not in Firefox

fadeIn, fadeOut working in IE, but not in Firefox

Hi,

I have the following html:

<div class="toolItem">
              <div class="toolHeading">
                <p class="toolName">Care Management Definition</p>
                <span class="toolType">Tool Type: Internal Link </span> <span class="SpecSpacer"> | </span><span class="toolDownload"><a href="#">Download</a> </span><span class="SpecSpacer"> | </span><span class="moreinfo">show description</span> </div>
              <div class="ToolDescription">
                <p>A comprehensive definition including practice and patient specific activities.</p>
              </div>
            </div>


and the following jquery code:

$('.toolName, .moreinfo').click(function() {
      if( $(this).parent().parent().css("background-color")=="#fff") {
         $(this).parents('.toolHeading').next('.ToolDescription').fadeIn();
         $(this).parent().parent().css({"background-color": "#fffee6"});
      } else {
         $(this).parents('.toolHeading').next('.ToolDescription').fadeOut();
         $(this).parent().parent().css({'background-color': '#fff'});
      }
   });


When a user clicks on either the .toolName or the .moreinfo elements, the .ToolDescription should fadeIn/fadeOut.

Either one (.toolName and .moreinfo) works fine in IE. However, clicking the .moreinfo element in Firefox doesn't do anything??

Any ideas why?

Thanks!