Question

<script>
$(function () {
    var icons = {
        header: "ui-icon-circle-arrow-e",
        headerSelected: "ui-icon-circle-arrow-s"
    };
    $("#accordion").accordion({
        icons: icons
    });
    $("#toggle").button().toggle(function () {
        $("#accordion").accordion("option", "icons", false);
    }, function () {
        $("#accordion").accordion("option", "icons", icons);
    });
});
</script>

I have gotten a Accordion to work in my MVC site, but when I modified the accordion Jquery to include Icons/Images for opening and closing (stright from the jquery website), I do not get any images displayed. Am I missing anything? I am not sure where i have to reference the images in my code. “ui-icon-circle-arrow-e” I am guessing, is the image, but I have no idea where it lives or how I can download it. There is nothing in the jquery website.

Answer 1

Check to see if you have Jquery UI’s CSS file and folders included. That’s where the images for the accordion are kept, as well as the CSS declaration that tells your page where to look for them. It should be as simple as getting it from the Jquery UI site, putting on your site, and defining the CSS.

You can test to see if it’s properly included by opening the page, viewing source and clicking the link to the CSS (works great in Chrome) It should open an actual page, not error out. You can also debug via Firebug, Chrome Debugger, etc.