Desplegables de jQuery Mobile

Bloques de contenido colapsable

Los colapsables (Collapsibles) te permiten ocultar o mostrar contenido - muy útil para almacenar información parcial.

Para crear un bloque de contenido colapsable, asigna la propiedad data-role="collapsible" a algún contenedor. En el contenedor (div), agrega un elemento de título (h1-h6), seguido de cualquier etiqueta HTML que necesites expandir:

Ejemplo

<div data-role="collapsible">
  <h1>Haz clic en mí - ¡Puedo colapsar!</h1>
  <p>Soy el contenido colapsable.</p>
</div>

Prueba personalmente

Por defecto, el contenido está cerrado. Si deseas expandir el contenido al cargar la página, utiliza data-collapsed="false":

Ejemplo

<div data-role="collapsible" data-collapsed="false">
  <h1>Haz clic en mí - ¡Puedo colapsar!</h1>
  <p>Ahora estoy por defecto desplegado.</p>
</div>

Prueba personalmente

Bloques colapsables anidados

Pueden anidarse bloques de contenido colapsable:

Ejemplo

<div data-role="collapsible">
  <h1>Haz clic en mí - ¡Puedo colapsar!</h1>
  <p>Soy el contenido desplegado.</p>
  <div data-role="collapsible">
    <h1>Haz clic en mí - Soy el bloque colapsable anidado!</h1>
    <p>Soy el contenido desplegado en el bloque colapsable anidado.</p>
  </div>
</div>

Prueba personalmente

Consejo:Los bloques de contenido colapsable pueden estar anidados el número de veces que desees.

Conjuntos colapsables

Los conjuntos colapsables (Collapsible sets) se refieren a los bloques colapsables combinados (a menudo llamados panderetas). Cuando se abre un nuevo bloque, todos los demás bloques se cierran.

Crea varios bloques de contenido, luego envasa este bloque colapsable con un nuevo contenedor utilizando data-role="collapsible-set":

Ejemplo

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Haz clic en mí - ¡Puedo colapsar!</h1>
    <p>Soy el contenido desplegado.</p>
  </div>
  <div data-role="collapsible">
    <h1>Haz clic en mí - ¡Puedo colapsar!</h1>
    <p>Soy el contenido desplegado.</p>
  </div>
</div>

Prueba personalmente

Más ejemplos

Eliminar las esquinas redondeadas mediante la propiedad data-inset
Cómo quitar las esquinas redondeadas de collapsibles.
Minimizar collapsibles mediante data-mini
Cómo hacer que los collapsibles sean más pequeños.
Cambiar los iconos mediante data-collapsed-icon y data-expanded-icon
Cómo cambiar los iconos de collapsibles (por defecto son + y -).