CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Runner5
Runner5

Reputation: 94

Hover and making accordion active dim icons

I am working on a website that has accordions in it and have a weird cosmetic issue that I can't seem to fix. If you hover over an accordion that is not active the arrow icon on the left and the ui-icon I added dim. Then once I select this accordion making it the active accordion the icons remained dim until the selected accordion is no longer active. Does anyone know what does this specifically? I want to disable it from doing that.

This discoloration seems to be standard. If you look at the Jquery UI website they show it in the demo: https://jqueryui.com/accordion/.

I have played around with the various CSS ui-accordion settings with no luck in finding a solution. I have also searched a lot online and have yet to find anything mentioning what specifically does this. Any direction would be appreciated.

Upvotes: 0

Views: 528

Answers (1)

CalvT
CalvT

Reputation: 3213

The reason you probably couldn't find it is that the icon is an background-img, and the image changes on hover. The other thing is that the hover is not configured in the usual way by using :hover, instead jQuery adds a new class to it when you hover over it.

The CSS you need to add is the following:

.ui-state-hover .ui-icon {
  background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important;
}

.ui-state-active .ui-icon {
    background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important;
}

This will keep them both the same when you hover and when you don't.

Here's a snippet showing then end result.

$(function() {
  var icons = {
    header: "ui-icon-circle-arrow-e",
    activeHeader: "ui-icon-circle-arrow-s"
  };
  $("#accordion").accordion({
    icons: icons
  });
  $("#toggle").button().click(function() {
    if ($("#accordion").accordion("option", "icons")) {
      $("#accordion").accordion("option", "icons", null);
    } else {
      $("#accordion").accordion("option", "icons", icons);
    }
  });
});
.ui-state-hover .ui-icon {
  background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important;
}

.ui-state-active .ui-icon {
    background-image: url("//code.jquery.com/ui/1.11.4/themes/smoothness/images/ui-icons_888888_256x240.png")!important;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
      a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
  </div>
</div>

Upvotes: 1

Related Questions