JQueryUI accordion with a custom anchor in IE8

Question

I have a very simple accordion in my webpage that I initialise with :

        $(document).ready(function() {
                $('#accordion').accordion({
                    'autoheight':true,
                    'header': 'img'
                });
        });

And later I:

                     <div id="accordion">
                        <img src="/public/images/btn_avant.gif" alt="" />
                        <div>
                            <ul>
                                <li><a href="/">link</a></li>
                                <li><a href="/">link</a></li>
                            </ul>
                        </div>
                        <img src="/public/images/btn_pendant.gif" alt="" />
                        <div>
                            du contenu
                        </div>
                        <img src="/public/images/btn_apres.gif" alt="" />
                        <div>
                            du contenu
                        </div>
                    </div>

That works perfectly in chrome, firefox but not in IE8. In IE8 It shows ok but when I click the img nothing happens.

IE8 does show me an error in jquery: on line 4083 of jquery.js I get an error.

Request access to the method or unexpected properties.

But nothing in Chrome.

If I change the img for h3 tags everything works as expected. So can I change the anchor for jqueryui accordion in ie8?

I just tried setting header to a class and giving that class to every img but it keeps working everywhere but IE.

Answer 1

Oh well I got it to work by wrapping my img inside a div with a class and I set header to this class and it works in IE8.

Performance is shitty to the point we are contemplating dropping accordions in our project.

I`ll leave the question open since I did not answer my question more then found a working workaround. So if someone posts a real solution Ill accept there answers.

Answer 2

You may want to try setting the style attribute on your image tags to display: block. Example: <img src="myimage.png" style="display:block;" />. If that doesn't work, my assumption is that IE8 is not treating the image tag as a normal tag as it should be (not a big surprise).

Answer 3

I had the same problem with the jQuery UI accordion in IE8. I was using an img as a custom header (by setting the class to header) and was getting an error in < Internet Explorer 8. My code looks like this:

$(function() {
        $("#accordion").accordion({
            collapsible: true,
            active:false,
            autoHeight: false,
            header:'.header'
        });
    });
    </script>

I didn't need to change my script, only my html. I had success by wrapping my custom img header with a div tag and making that have a class of header. So instead of <img class="header".../> I used: <div class="header"><img ... />...</div>

Thanks for the tip iznogood