Jquery accordion plugin

Question

Hi :

I am use Jquery accordion plugin. I need to use my own header icons, according to doc, i need to create css class with background image.

so i did this in my css file.

.normal_arrow {
    background : url(../images/arrowonly.jpg);
}

.circle_arrow {
    background : url(../images/circle_arrow.jpg);
}

.circle_arrow_down {
    background : url(../images/circle_arrow_down.jpg);
}

then in javascript:

$("#accordion").accordion({
    header: "h3",
    clearStyle: true,
    autoHeight: false,
    icons: {
        header: "normal_arrow",
        headerSelected: "circle_arrow_down"               
    }
});

but there is no arrows showed up.

Answer 1

Your code looks correct.

Try using background-image: instead of background:

Also use a tool like Firebug to make absolutely sure the relatives paths are going where you think they are going.

Answer 2

In the CSS use background-image and in the JavaScript you need to put header and headerSelected in quotes.

Answer 3

Incorrect use of background. For that to render probably either use

background-image: url(../images/circle_arrow.jpg);

or

background: transparent url(../images/circle_arrow.jpg) top left no-repeat;