The recommended way to change the plus and minus icons of the collapsible sets (accordion) in jQuery Mobile is to specify data-expanded-icon
and data-collapsed-icon
attribute to the div. But sometimes it does not change the icons. In such cases we can change it manually by overriding the .ui-icon-plus
and .ui-icon-minus
classes giving the background-position
for the down and up arrows. Add a class eg-accordion
to the div
with data-role="collapsible-set"
and see the below CSS overrides.
.eg-accordion .ui-icon-plus {
background-position: -216px 50%; /* override the '+' with down arrow */
}
.eg-accordion .ui-icon-minus {
background-position: -180px 50%; /* override the '-' with up arrow */
}