Monday, May 21, 2012

JQM: Accordian - Change Right Plus & Minus Icon to Arrow Icons

The recommended way to change the plus and minus icons of the collapsible sets (accordian) 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:
.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*/
}