JQuery accordion puzzle in quirks mode

JavaScript
1

I’ve created a side menu that uses a jQuery accordion script (not a plugin). It’s working differently in Firefox and IE8 from IE8 Quirks and IE6. The target corporate browser is IE6 so I have to find what’s wrong.

The HTML is just this, which seems to work OK on other sites I’ve done:


<h3><a href="#">Leadership and Management</a></h3>
<h3 class="expand">Functional Academies</h3>
	<div class="collapse">
			<ul  class="menu">
				<li><a href="#">Audit</a></li>
				<li><a href="#">Communications</a></li>
				<li><a href="#">Finance</a></li>
			</ul>
	</div><!-- collapse -->
		
<h3 class="expand">Other Divisional Academies</h3>
	<div class="collapse">
			<ul  class="menu">
				<li><a href="#">Group Operations</a></li>
				<li><a href="#">Insurance</a></li>
			</ul>
	</div><!-- collapse -->

So two lists which expand when you hit their H3. The trouble is that when they’re collapsed they should show a ‘down’ arrow, contained in the class ‘expand’ and when they’re opened, show an ‘up’ arrow, contained in the class ‘open’. In IE8 compliant and Firefox it’s fine. In quirks and IE6, as soon as the page loads the first h3 has an up arrow and the second a down. When you click on the first to open it, it toggles up and down, but inverse to what it should be. When you click on the second one to open it, then close it, both H3s revert to the way they should be! I’m guessing it’s something to do with CSS that doesn’t work in IE6 but can’t find what.
Here’s the jQuery:

	// put a link into all the h3s
    $('#nav h3.expand').wrapInner('<a style="display:block" href="#" title="Click to expand or collapse the menu."></a>');
	
   
	//this seems to be where it happens
    $('#nav').find('h3.expand:eq(0)').addClass('open').end()
	 
	
	// find any with class collapse and hide them 
    .find('div.collapse').hide().end()
	
	// if a question is clicked
    .find('h3.expand').click(function() {
		// open if closed, close if open
        $(this).toggleClass('open').siblings().removeClass('open').end()
		// open answer if closed, close if open
        .next('div.collapse').slideToggle().siblings('div.collapse:visible').slideUp();
        return false;
    });

and here’s the CSS:


#nav h3.expand  a:link,  #nav h3.expand  a:visited {
	background-image:url(../images/icons/16-arrow-down.gif);
	background-position:right top;
	background-repeat:no-repeat;
	}

#nav h3.expand.open a:link, #nav h3.expand.open a:visited {	
	background-image:url(../images/icons/16-arrow-up.gif);
	background-position:right top;
	background-repeat:no-repeat;
	}

I’ve also attached screen shots. Just to reiterate, I need this to work in IE6 :frowning:

Can anyone spot what’s wrong?