JQuery slidedown is misbehaving in IE8

Question

I've been working on this for a while now and it functions perfectly in IE6 (stand alone), IE7 (in IE8), Firefox 3.5 and Chrome 0.2.149 on Windows XP SP3. Using JQuery minimised 1.3.2.

It is supposed to work like a file explorer, where you can click an image next to a parent element the sub-elements appear and the image changes to reflect this. The changed image can be clicked again to collapse the sub elements. If you click a different parent element image then all open parent elements collapse/close and their images are changed to reflect this. The clicked element then opens to show its child elements i.e. only one parent element open at one time.

<div id="categories>
   <ul>
      <li>
         <a href="#" class="expandable"><img src="arrow_right.jpg" /></a>
         <a href="page.any?name=name>Name</a>
         <ul>
            <li><a href="subpage.any?name=blah">Sub cat name</a></li>
            <li><a href="subpage.any?name=blah2">Sub cat name2</a></li>
            ...etc...
         </ul>
      </li>
      ...etc...
   </ul>
</div>

As you can this is not the actual code but you get the point.

The JQuery:

$(document).ready(function(){
// find all first level list items (which have nested UL/third level cat) and attach a click event
$('div#categories > ul > li:has(ul) > a.expandable').click(function(){
        // get a reference to the highest level <ul>
        var parentList = $(this).parent().parent();
        // get a reference to the <ul> containing the link that was just clicked
        var childList = $(this).parent().find('ul');

        // if uncollapsed clicked
        if(childList.css('display') == 'none')
        {
            // hide any other (expanded) menus
            if(parentList.find('li ul:visible').length > 0)
            {
                parentList.find('li ul:visible').slideUp('slow',function(){
                    // expand the menu the user clicked on
                    childList.parent().find('img').attr('src','skins/Skin_1/images/arrow_down.jpg');
                    childList.slideDown('slow');
                    childList.parent().addClass('expanded');                        
                    });
                    parentList.find('li').removeClass('expanded');
                    parentList.find('img').attr('src','skins/Skin_1/images/arrow_right.jpg');
            }
            else
            {
                $(this).parent().find('img').attr('src','skins/Skin_1/images/arrow_down.jpg');
                childList.slideDown('slow');
                $(this).parent().addClass('expanded');
            }
        }
        else {
            childList.slideUp('slow');
            childList.removeClass('expanded');
            parentList.find('img').attr('src','skins/Skin_1/images/arrow_right.jpg');
        }
        // stop the href in the clicked anchor from doing its thing.   
        return false;
    });
});

There is also some css applied to it:

div#categories ul li ul {
    display:none;
}

I'm getting lots of weird effects such as the image not always changing and if a parent element further down the ul is open when the higher element is clicked then a strange sort of "bouncing" effect occurs where the higher element opens, collapses and opens and stays open as it is supposed to.

Unfortunately I cannot give you a link as it is purely in development and hence not publicly viewable yet.