Los elementos Collapsible de jQuery Mobile, son widgets bastante útiles, aunque algunos no sepan cómo usarlos. Es por ello que voy a comentar por brindar una breve explicación sobre este componente de interfaz gráfica de usuario.

Un collapsible, es un elemento que posee una barra con un título, que va a responder a eventos del usuario. Así, cuando se haga clic o tab -en caso de los eventos touch-, este abrirá o cerrará un panel con cualquier contenido que se haya puesto allí.

En el caso del Collapsible que se genera con jQuery Mobile, además de crear la barra, pone el icono de mas "+" cuando el panel está cerrado (es decir, data-icon="plus"), y el menos (data-icon="minus") cuando el contenido esta abierto. Todo esto lo hace jQuery Mobile de forma automática, limpia y rápida.

Debes tener en cuenta que la palabra collapsible en español significa desplegable, pero para no llevarnos a engaño con los clásicos elementos de formulario desplegables, en este artículo usaremos el término en inglés.

Creación simple de elementos Collapsible

Los elementos Collapsible, requieren cierta configuración, o más bien ciertos requisitos de elementos HTML. Cuando se crea el Collapsible, con un esquema de etiquetas HTML bien construido, nos aseguramos que jQuery Mobile haga su tarea de forma eficiente.

Para comenzar, necesitamos un elemento DIV, que debe tener, como muchos otros widgets vistos en el manual de jQuery Mobile, el atributo data-rolecon el valor "collapsible".

A continuación podemos ver cómo se crea un elemento collapsible.

<div data-role="collapsible">
    <h3>Elemento Collapsible simple</h3>
    <p>Este es el contenido del collapsible el cual podemos ocultar</p>
</div>

Como puedes observar en el código anterior, dentro del elemento DIV debemos hacer un encabezado, que será el título del collapasible. A continuación hacemos un párrafo dentro del DIV, el cual es el contenido del elemento, donde podemos insertar cualquier etiqueta HTML como contenido.

Por defecto, el collapasible aparece recogido, pero si se requiere podemos configurar el widget para que aparezca abierto al cargar la página. Para ello solo hay que agregar el atributo data-collapsed, que recibe un valor booleano. La forma de usarlo es muy simple y se puede apreciar en el siguiente código.

<div data-role="collapsible" data-collapsed="false">
    <h3>Elemento Collapsible abierto</h3>
    <p>Este es el contenido del collapsible el cual podemos ocultar</p>
    <a href="#" data-role="button" data-inline="true">hola</a>
</div>

Con esto estamos creando un collapsible que al cargar la página está abierto. Además quise agregar un botón, algo que ya hemos aprendidos en artículos pasados del manual de jQuery Mobile, para ilustrar que podemos meter cualquier elemento dentro de este widget. Por rizar el rizo, podríamos insertar hasta otro collapsible dentro del primero.

Temas gráficos en collapsible

A lo largo del manual de jQuery Mobile, se ha podido apreciar el uso de los temas prediseñados en el framework, que permiten aportar mayor variedad estética a los componentes de interfaz gráfica. En los temas podemos colocar diversos colores y efectos. Revisa el manual para encontrar más información sobre los temas, porque de momento en este artículo solo veremos lo relevante al widget.

Adicionalmente al atributo data-theme, los collapsible, tienen otro atributo para trabajar su configuración visual. Se trata de data-content-theme, con el que podemos asignar un tema diferente al contenido del elemento. Es decir, mientras el encabezado o la barra donde está el título, tendrá asignado el tema que modificamos con data-theme, podremos asignar por separado un tema al cuerpo con data-content-theme. Este interesante detalle lo podemos ver con el siguiente código.

<div data-role="collapsible" data-theme="a" data-content-theme="e">
    <h3>Encabezado con tema A</h3>
    <p>ENota:l contenido tiene el tema e</p>
    <div data-role="collapsible" data-content-theme="a">
       <h3>Collapsible dentro de otro</h3>
       <p>En este caso vemos que este esta dentro de otro</p>
    </div>
</div>

Como se puede apreciar, también está inmerso un collapsible, cada uno puede tener sus temas diferentes, aunque también se puede trabajar con el tema que tiene el collapsible padre.

Crear un acordeón con collapsible

Otro de los atractivos que tiene el elemento collapsible, es el hecho de poder convertirlo en un acordeón. Se trata de un componente donde podemos encontrar varios paneles unidos y relacionados entre sí, de modo que al abrirse uno, todos los demás se cerrarán. En un acordeón se mantendrá visible solo uno de los elementos que lo compone.

Este widget, o componente de interfaz gráfica de usuario, se encuentra disponible en jQueryUI, pero cabe aclarar que la forma de creación de jQuery Mobile es diferente. En este caso se simplifica todo, además de auto-inicializar, cada uno de los widgets que se han creado con data-role.

Siguiendo el camino de jQuery Mobile framework, es importante decir que para la creación de acordeones disponemos de un valor ?collapsible-set? que se le puede dar a un DIV con el atributo data-role. Esto se ve reflejado en el siguiente código.

<div data-role="collapsible-set" >
</div>

Dentro de este elemento DIV agregamos todos los collapsibles que deseemos, haciendo que cada uno se comporte como un elemento del acordeón. Como puedes imaginar, a los acordeones también se les puede aplicar temas gráficos con data-theme o data-content-theme, para que cada uno de sus elementos tenga el mismo color. Aunque también puedes asignar un tema diferente a cada uno de los elementos.

Para mayor claridad de todo lo explicado en este artículo veamos el código completo de una pequeña aplicación web móvil que ilustra el uso de collapsible.

<!DOCTYPE html>
    <html lang="es">
       <head>
          <meta charset="utf-8"/>
          <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
         <title>Collapsible con jQuery Mobile</title>
          <link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
         <script src="jquery-1.7.1.min.js"></script>
         <script src="jquery.mobile-1.0.min.js"></script>
       </head>
      <body>
          <div data-role="page">
             <div data-role="header" data-theme="b">
                <h1>Elementos Collaspsible</h1>
             </div>
                <div data-role="content">
                <div data-role="collapsible">
                   <h3>Elemento Collapsible simple</h3>
                      <p>Este es el contenido del collapsible el cual podemos ocultar</p>
                   </div>

                   <div data-role="collapsible" data-collapsed="false">
                   <h3>Elemento Collapsible abierto</h3>
                      <p>Este es el contenido del collapsible el cual podemos ocultar</p>
                      <a href="#" data-role="button" data-inline="true">hola</a>
                  </div>

                <div data-role="collapsible" data-theme="a" data-content-theme="e">
                   <h3>Encabezado con tema A</h3>
                   <p>El contenido tiene el tema e</p>
                   <div data-role="collapsible" data-content-theme="a">
                      <h3>Collapsible dentro de otro</h3>
                      <p>En este caso vemos que este esta dentro de otro</p>
                     </div>
                   </div>

                   <div data-role="collapsible-set" data-theme="e" data-content-theme="a">
                      <div data-role="collapsible">
                      <h3>Primer elemento del acordeon</h3>
                      <p>Ahora estamos viendo el lemento tres del acordeon</p>
                   </div>

                      <div data-role="collapsible" >
                      <h3>Segundo elemento del acordeon</h3>
                      <p>Ahora estamos viendo el lemento tres del acordeon</p>

                   </div>

                   <div data-role="collapsible" data-theme="a" data-content-theme="b">
                      <h3>Tercer elemento del acordeon con tema diferente</h3>
                      <p>Ahora estamos viendo el lemento tres del acordeon tambien tiene contenido con otro tema</p>

                   </div>
                      </div>               
                </div>
                   <div data-role="footer">
                   <h3> Elementos Collaspsible</h3>
                </div>
             </div>
          </body>
       </html>

Recuerda que también puedes ver un ejemplo en funcionamiento en una página aparte.