CODEWITHSUNDEEP
jqueryheadericonsaccordion
anru
anru

Reputation:

Jquery accordion plugin

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.

Upvotes: 3

Views: 3598

Answers (6)

user940979
user940979

Reputation:

NOTE: this is only for users who are NOT using any jquery styling. (ie) you didn't include jquery's css in the file.

the default style in the CSS is this:

.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 show up, its because of the above class.

Add this to your document:

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

</style>

Upvotes: 0

Constantin Predescu
Constantin Predescu

Reputation: 311

Use !important:

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

because you need to overwrite the default style.

Upvotes: 1

barro32
barro32

Reputation: 2708

Same problem, I had to use position:absolute; to make the icon container take a width and a height.

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

Upvotes: 3

Dmitri Farkov
Dmitri Farkov

Reputation: 9671

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;

Upvotes: 0

BigPigVT
BigPigVT

Reputation:

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

Upvotes: 0

Paolo Bergantino
Paolo Bergantino

Reputation: 488414

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.

Upvotes: 2

Related Questions