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*/
}