Necesito un acordeón jquery para usar diferentes archivos de imagen para el ícono de flecha de cada sección

It's a similar question to one or two that has been asked before, I need the accordion to do something slightly different though. All of the icons are the same when the accordion is inactive, I only need the icons to change individually when they are in a hover or active state.

<div id="accordion">
<h3 class="acch1"><a class="acc1" href="#">Management and Analysis</a></h3>
<div>
</div>
<h3><a class="acc2" href="#">Communication Management</a></h3>
<div>
</div>

El CSS:

.ui-icon { width: 21px; height: 21px; background-image: url(../images/ui-icons_454545_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); }
.ui-state-default .ui-icon { background-image: url(../images/ui-icons_454545_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); }

.ui-accordion-header.acch1 .ui-state-hover .ui-icon {background-image: url(../images/ui-icons_669FC5_256x240.png); }
.ui-accordion-header.acch1 .ui-state-active .ui-icon {background-image: url(../images/ui-icons_669FC5_256x240.png); }

The bottom two are what I was attempting to use, and they work up until I add in the .ui-state-hover and .ui-state-active.

Aquí está el jsfiddle jsFiddle

preguntado el 03 de mayo de 12 a las 16:05

When you use jsfiddle, it makes life easier and makes it faster to find the solution IMO. -

You opened 3 divs but only closed 2? is this a typo? -

There are a total of 5 divs, with loads of content, it's really only the h3's that are relevant to the question. -

1 Respuestas

I believe if you remove the acch1 class from your rules, and change the targeting, then it should work. Try the following with your images:

h3.ui-accordion-header.ui-state-hover span.ui-icon {background-image: url(http://code.jquery.com/ui/1.8.20/themes/base/images/ui-icons_222222_256x240.png); }
h3.ui-accordion-header.ui-state-active span.ui-icon  {background-image: url(http://code.jquery.com/ui/1.8.20/themes/base/images/ui-icons_222222_256x240.png); }​

By keeping the .acch1 class as part of your rule, you'll only target that specific H3 element instead of any active or hovered element.

contestado el 03 de mayo de 12 a las 16:05

That would work, however I need each individual h3 to have a different image file (for different colors) - m.hitmore

OK, so then you would just duplicate the rules, appending the class or ID of each H3 element. - j08691

The targeting works if it's just the default .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); } - m.hitmore

I don't quite know what you mean by 'appending the class'.. I'm still fairly new to javascript and all that. - m.hitmore

In other words, if you need each H# to have a different image, you can add the class (like .acch1) to the selectors I gave you above. E.g. h3.acch1.ui-accordion-header.ui-state-hover span.ui-icon creating a duplicate rule for each H3 and replacing that H3's class where you see acch1 in this example. - j08691

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.