JQuery Accordion Plugin

Question

I am using the jQuery accordion plugin. I need to use my own header icons, according to doc, I need to create a css class with a 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 the arrow does not appear.

Answer 1

Same problem, I had to use position: absolute; so that the icon container has a width and a height.

.normal_arrow {
    background : url(../images/arrowonly.jpg);
    position: absolute;
    width: 10px;
    height: 10px
}

Answer 2

Your code looks correct.

Try using background-image:insteadbackground:

Also use a tool such as Firebugto make sure that relatives' paths go where you think they are going.

Answer 3

!important:

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

.

Answer 4

CSS JavaScript , .

Answer 5

Misuse of background. For this, to do, perhaps either use

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

or

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

Answer 6

NOTE. this is only for users who DO NOT use any jquery style. (that is) you did not include jquery css in the file.

CSS default style:

.ui-icon { display: none; text-indent: -99999px; overflow: hidden; background-repeat:  no-repeat; }

So, if you set up a div with a background image, width and height, but it still won't appear, because of this class.

Add this to your document:

<style type="text/css">
.ui-icon { display: block; }

</style>