Home/ Questions/Q 7885793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T05:09:40+00:00

It’s a similar question to one or two that has been asked before, I

  • 0

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>

The 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.

Here’s the jsfiddle jsfiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0