JQuery Mobile Collapsible content

Question

I've been looking into using http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html for a site I am building.

Is there a way to change the Icons used for expanded and collapsed sections. At the mooment I can't see a way to change it from + and - icons.

The client would prefer arrows or different icons.

Thanks, Cian

Answer 1

There are many ways to do this. You could do it in Javascript but it's better to simply change the css a bit.

You can specialize the css for .ui-icon-plus/minus when they are nested inside a .ui-collapsible-contain to have the same look as another icon:

Before:

/*arrows*/
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-icon-arrow-d { background-position: -216px 0; }

After: (Example using the right and down arrows instead)

/*arrows*/
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }

That way it won't change the general look for the plus/minus button excepted for this special case!

EDIT: Thanks J0ttE for updating this code to jQuery mobile version 1.0 :

/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }

Answer 2

I updated Eric Gagnon's code to match jQuery Mobile 1.0

/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }