Hi people
I'm coding a site with a four-stage accordion as a navigation sidebar. When a user clicks on an accordion stage, an image with a text link overlaid pops out from beneath.
It's working fine in every browser except, natch, IE, and I'm flummoxed as to why. I've tried everything I can think of. Any help would be greatly appreciated. Code is below.

Here's the HTML for the accordion. There's a nav tag called #sidebar which contains two parts: an aside (#conditions) and the accordion (#navV). You can pretty much ignore #conditions, as it's #navV that's causing the headache, but I thought it prudent to include it anyway.

<nav id="sidebar">

<aside id="conditions">
<h3>Find out more about</h3>
<p><a href="conditions.php">Content here</a></p>
...
<p><a href="conditions.php">More content here</a></p>
</aside>

<ul id="navV">
<li><span>Login area</span></li>
<div class="accImage" id="loginBackground">
<?php echo $formLogin->html; ?>
</div>
<li><span>Find businesses</span></li>
<div class="accImage" id="findImage">
<a href="location.php"><p>Find your nearest local blah blah blah</p></a>
</div>
<li><span>Register as a website member</span></li>
<div class="accImage" id="contactImage">
<a href="register.php"><p>Join as a website member to gain access to news and articles</p></a>
</div>
<li><span>Information on the site</span></li>
<div class="accImage" id="newsImage">
<a href="info.php"><p>Find out about the website, its background, structure and aims</p></a>
</div>
</ul>
</nav><!--end of sidebar-->

Here's the JS. It's wrapped in <script> tags and the necessary jQuery $(document).ready(function() { .... }); stuff too.


$('#navV .accImage').hide();
$('#navV li span').click(function(){
$('#navV .accImage').slideUp(200);
$(this).parent().next().slideDown();
return false;
});

As I said, working a charm in FF, Chrome, Opera, Safari. Just IE - you click on the <li><span> and nothing happens.

Thanks in advance!