Habréis observado que muchas aplicaciones y páginas web, en particular en su versión para teléfonos móviles, organizan la información de una forma muy útil, que consiste en agrupar secciones de información bajo un título, de manera que cada uno de esos bloques se puede expandir o contraer. Eso permite aprovechar mejor la interfaz de usuario y agiliza la organización de la información en pantalla. Este tipo de interfaz se denomina "acordeón", por el hecho de que cada sección se puede expandir y contraer como el cuerpo de dicho instrumento.
Fig. 1. Las secciones del acordeón contienen info "en su interior"
Al desplegar la sección de Historia
Fig. 2.Al desplegar una sección, el icono cambia
En la documentación de jQuery sobre los "acordeones" [http://jqueryui.com/accordion/]se describe en detalle cómo utilizar este tipo de interfaz, pero aquí os dejo una brevísima introducción para que en un minuto podáis tener algo así funcionando con tres sencillos pasos:
1) Como siempre, crear una página e incluir en ella la referencia a jQuery
1 <head> 2 ... 3 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 4 <script src="//code.jquery.com/jquery-1.10.2.js"></script> 5 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 6 ... 7 </head>
2) Crear una división (DIV) que contendrá todas las secciones del acordeón. Cada sección ha de ir precedida por una etiqueta de cabecera (H1, H2... H6). Si hacéis pruebas, veréis que da igual usar H1 que H2 que H3... e incluso se pueden mezclar indistintamente, que jQuery las usará como títulos de las secciones.
1 <body> 2 ... 3 <div id="bloque_acordeon"> 4 <h1>Sección 1. Mis personas preferidas</h1> 5 <div> 6 <p> 7 Esto está dentro del bloque1 8 <ul> 9 <li>Claudia Chífer</li> 10 <li>Mariano Gandhi</li> 11 <li>Jason Voorhees</li> 12 </ul> 13 </div> 14 15 <h1>Sección 2. Mis animales preferidos</h1> 16 <div> 17 <p> 18 Esto está dentro del bloque2 19 <ul> 20 <li>Lassie</li> 21 <li>El pollo a la brasa</li> 22 <li>Claudia Chífer</li> 23 </ul> 24 </div> 25 26 <h1>Sección 3. Mis plantas preferidas</h1> 27 <div> 28 Esto está dentro del bloque3 29 <ul> 30 <li>El algarrobo mediterráneo</li> 31 <li>María</li> 32 <li>Claudia Chífer</li> 33 </ul> 34 </div> 35 36 ... 37 </body>
y 3) Incluir el código jQuery que hace que esta sección funcione como un acordeón. Una simple llamada a una función
1 <script> 2 $(function() { 3 $("#bloque_acordeon" ).accordion(); 4 }); 5 </script>
Hay un detalle que a mí me gusta, y es el hecho de que la primera sección se pueda cerrar sin tener que abrir ninguna otra. Para esto, basta con añadir dentro de la función "accordion" la propiedad "collapsible: true", quedando así el paso 3:
1 <script> 2 $(function() { 3 $("#bloque_acordeon" ).accordion( 4 { collapsible: true } 5 ); 6 }); 7 </script>
Pues aquí está todo junto en esta plantilla que podéis adaptar a vuestras necesidades:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>Ejemplo de un acordeón con jQuery</title> 5 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 6 <script src="//code.jquery.com/jquery-1.10.2.js"></script> 7 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 8 <script> 9 $(function() { 10 $("#bloque_acordeon" ).accordion( 11 { collapsible: true } 12 ); 13 }); 14 </script> 15 16 </head> 17 18 <body> 19 Organizar la interfaz de usuario con un "acordeón" 20 <div id="bloque_acordeon"> 21 <h1>Mis personas favoritas</h1> 22 <div> 23 Esto está dentro del bloque1 24 <ul> 25 <li>Claudia Chífer</li> 26 <li>Mariano Gandhi</li> 27 <li>Jason Voorhees</li> 28 </ul> 29 </div> 30 31 <h1>Mis animales favoritos</h1> 32 <div> 33 Esto está dentro del bloque2 34 <ul> 35 <li>Lassie</li> 36 <li>El pollo a la brasa</li> 37 <li>Claudia Chífer</li> 38 </ul> 39 </div> 40 41 <h1>Mis plantas favoritas</h1> 42 </span> 43 <div id="contenido_bloque3" style='display: none'> 44 Esto está dentro del bloque3 45 <ul> 46 <li>El algarrobo mediterráneo</li> 47 <li>María</li> 48 <li>Claudia Chífer</li> 49 </ul> 50 </div> 51 </div> 52 53 </body> 54 </html>
