Mostrar y ocultar contenido con jQuery Mobile: colapsables

Colapsar y expandir contenido resulta muy útil para mostrar información en espacios pequeños. En este artículo te explicamos como lograr dicha funcionalidad en jQuery Mobile.

El framework jQuery Mobile nos da la opción de manejar y mostrar en nuestros sitios web diseñados para dispositivo móviles, elementos con contenido plegable.

Este concepto se utiliza para definir a todo aquel elemento cuyo contenido es capaz de ser colapsado y expandido mediante alguna acción invocada por el usuario.

La creación de un widget de contenido plegable es muy sencilla, basta con envolver el contenido deseado en un div, añadir el atributo “data-role” con el valor “collapsible” a dicha etiqueta, e incluir un título para el contenido.

Basándonos en esto, el código lucirá de la siguiente forma:

<div data-role="collapsible">
<h1>Este es el título</h1>
<p>Este es el contenido</p>
</div>

Al momento de desplegar los elementos, jQuery Mobile se encargará de convertir el título en un banner, el cual será capaz de recibir clics por parte del usuario con el fin de expandir o contraer el resto del contenido del div.

Uso práctico de contenido colapsable

Una situación en donde el contenido plegable puede ser una solución efectiva, es cuando queremos compartir información complementaria, por ejemplo muchas empresas despliegan en sus páginas la dirección de su matriz u oficinas centrales, sin embargo al mostrar las direcciones del resto de las sucursales puede resultar abrumador a simple vista.

Para evitar esto, se puede desplegar el resto de la información en un elemento plegable.

<div data-role="page" id="primera">
  <div data-role="header">
    <h1>Oficinas</h1>
  </div>
  <div data-role="content">
    <p>
    <strong>Matriz:</strong><br/>
    A Hernández 17<br/>
    Ciudad de México, México<br/>
    93000
    </p>
    <div data-role="collapsible">
    <h3>Sucursales</h3>
    <p>
    <strong>Asia:</strong><br/>
    Dirección en Terán<br/>
    Terán, Irán<br/>
    </p>
    <p>
    <strong>Europa:</strong><br/>
    Dirección en Madrid<br/>
    Madrid, España<br/>
    </p>
  </div>
</div>

Al utilizar el anterior código, la página mostrará únicamente la dirección de la Matriz, mientras que el resto se mostrará simplemente como un banner con el nombre “Sucursales” y un icono del signo de más, el cual servirá para indicar al usuario que ese elemento se puede expandir.

Al momento de expandir el contenido el icono cambia por un signo de menos.

Expandir contenido por defecto

Por defecto jQuery Mobile colapsa y oculta el contenido, pero esto puede ser modificado.

Para decirle a jQuery Mobile que inicialice el bloque de forma abierta en lugar de cerrada, es necesario añadir el atributo “data-collapsed” con el valor “false” a la etiqueta div inicial.

<div data-role="collapsible" data-collapsed="false">
<h1>Este es el título</h1>
<p>Este es el contenido</p>
</div>

Esta región todavía tendrá la capacidad de colapsarse y expandirse, pero simplemente por defecto estará abierto inicialmente.

Tematización del colapsable

Otra opción que nos ofrecen los bloques de contenido plegables, es la capacidad de tematizar el contenido del área que está contraída.

Al utilizar el atributo “data-content-theme”, podemos especificar un color de fondo, lo que hace que la delimitación de la región sea un poco más coherente.

La tematización es un tema que trataremos más a fondo en otro artículo, pero podemos echar un vistazo rápido con un ejemplo sencillo.

<div data-role="collapsible">
  <h3>Primer Banner</h3>
  <p>Hola</p>
</div>

<div data-role="collapsible" data-content-theme="c" data-iconpos="right">
  <h3>Segundo Banner</h3>
  <p>Hola de nuevo</p>
</div>

El primer banner que mostramos con el código anterior lucirá normal, mientra que el segundo mostrará el contenido con un fondo blanco y un borde que ayuda a delimitar.

En este mismo ejemplo utilizamos el atributo “data-iconpos” el cual sirve para establecer la posición del icono que indica el área plegable, en este caso lo alineará a la derecha puesto que le dimos el valor de “right”.

Acordión

Por último, tenemos la opción de tomar múltiples regiones plegables y combinarlas en una sola área, formando así un acordeón.

Esto se hace simplemente tomando varios bloques plegables y envolviéndolos en una nueva etiqueta div.

Esta etiqueta div debe hacer uso del atributo “data-role” con el valor “collapsible-set”. Esto hará que los bloques internos se conviertan en una unidad.

Una vez hecho esto, jQuery Mobile agrupará los divs y cerrará automáticamente el que esté abierto una vez que se de la orden de abrir otro.