contenido de jQuery Mobile plegable

Question

He estado buscando en el uso de http: // jquery mobile. com / demos / 1.0a2 / docs / content / content-collapsible.html para un sitio que estoy construyendo.

¿Hay una manera de cambiar los iconos utilizados para las secciones de expandir y contraer. Al mooment no puedo ver una manera de cambiarlo de + y -. Iconos

El cliente preferiría flechas o diferentes iconos.

Gracias, 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; }