Avatar of nzinsli
nzinsli
Flag for United States of America asked on

jquery accordion custom icons

I setup a basic jquery accordion, but am having issues setting up custom icons. I tried with and without the jquery ui css, and from what I can tell I am using the correct syntax. But when I look at the icon in firebug, my custom style isnt being applied. What am I missing?

Example url - http://bit.ly/JwhclO
CSS -
.accordion_up
{
	background-image: url(../webimages/master_accordion_arrows_sprite.gif) -11px left !important;
	width: 11px;
	height: 8px;
}
.accordion_down
{
	background-image: url(../webimages/master_accordion_arrows_sprite.gif) top left !important;
	width: 11px;
	height: 12px;
}

Open in new window

jquery accordion...
$(document).ready(function() {
		$("#accordion").accordion();
		$("#accordion").accordion("option", "autoHeight", false);
		$("#accordion").accordion("option", "icons", { 'header': 'accordion_up', 'headerSelected': 'accordion_down' });
	});

Open in new window

jQueryJavaScriptWeb Development

Avatar of undefined
Last Comment
nzinsli

8/22/2022 - Mon
SOLUTION
mrh14852

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Jon Norman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
nzinsli

ASKER
ok, finally got them to appear. Must have been a syntax issue with the way I was doing the accordion config, and also had a typo in the css.

One question - Is it not possible to get them to appear w/o adding the http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css reference? As soon as I remove that, they disappear. I really don't want any of the other styles that it puts in, just the icons...So if that's the case, I'll have to create a blank theme in jquery ui theme roller?
mrh14852

You need the UI CSS.
nzinsli

ASKER
Thanks guys.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23