jQuery accordion click() not working in IE

[tommuseth]

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!

[paul_wilkins]

The problem you are having is due to DIV elements being invalid children of the UL element.

Move the DIV elements inside the LI ones, adjust your script accordingly, and you should be fine.

[tommuseth]

Thanks for the quick reply Paul. Yes, I figured I wasn't nesting according to best practice! Anyway I'll give this a whirl and see how it goes.

[paul_wilkins]

Thanks for the quick reply Paul. Yes, I figured I wasn't nesting according to best practice!

It's not a best practice. The only element that's allowed within the UL element are LI elements. Anything else and you have broken code. That's not a best practice - it's obeying the law. One that is broken at your own peril.

[tommuseth]

Hmm, I've tried your suggestions but haven't met with any luck. Infact I tried myriad different options - replacing divs with spans, putting li's around those spans, getting rid of the p tags ... nothing. I've also toyed endlessly with the JS underlying the accordion. Again, zero.

If anyone can help by going to the page (link below) and toying with the code I'd really appreciate it. I'd like to check out other people's alternate versions.

And I realise I could include an accordion plugin, but I figure I've come this far, there has to be some sort of solution - particularly as every other browser, bar IE, is playing fair with me. Sodding IE...

The link is The Institute of Health Psychology

Cheers!

PS I've stripped the code right back to its original form, with the divs included. If anyone can show me from that point how they'd rearrange things, that would be awesome.

[paul_wilkins]

PS I've stripped the code right back to its original form, with the divs included. If anyone can show me from that point how they'd rearrange things, that would be awesome.

Fix the invalid HTML structure. That's the base cause of the problem.

<ul id="navV"> 
    <li><span>Login area for site members</span></li>
    <div class="accImage" id="loginBackground"> 
    </div>
    ...
</ul>

Currently you have LI elements and DIV elements as children of the UL element. Only LI elements are allowed as direct children. That means anything else in the UL element must be contained within the LI element.

<ul id="navV"> 
    <li><span>Login area for site members</span>
        <div class="accImage" id="loginBackground"> 
        </div>
    </li>
</ul>

Now that you have valid HTML code you can move on to the scripting. The span event doesn't need to go to the parent anymore

$(this).parent().next().slideDown();

And all that remains is to tidy up the CSS presentation, for example, not having the LI as only 60 pixels high

#navV li {
    width: 200px;
    height: 60px;
    ...
}

[tommuseth]

Thanks again for your help. And there's an interesting postscript to this quandary. I'm using a lot of CSS3 specs in this project, including border-radius on the divs. To simulate the border-radius effect in IE I stumbled across a plugin called Curvy Corners which everyone seemed to be raving about.

Now this was just a plain accident, but in mucking around with browser tests, I inadvertently severed the link to the Curvy Corners include in my header. I only noticed this because suddenly all my divs in IE suddenly showed sharp corners. But I also noticed that, rather miraculously, most of my IE problems disappeared, namely:

- the accordion not working
- drop down menus not functioning properly
- whereas before all my jQuery effects had been horribly jerky in IE, suddenly they were smooth.

It's odd, cos the plugin only had a 30K footprint, but it seemed to be the root cause of numerous problems. Removing it has made things much smoother, and more importantly, all my snazzy effects work!

The only drawback is my boxes have sharp corners in IE. I could draw up some curved images in Fireworks but I'm stuffed if that's going to happen at this late stage; IE users won't even know the difference.