Crear un acordeón al estilo Material Design


En esta ocasión te muestro cómo utilizar un plugin jQuery para crear un acordeón que sigue los principios básicos del reciente estilo de diseño creado por Google: Material Design.

¿Qué es Material Design?

Es una nueva tendencia de diseño. Al contrario de Flat Design, se basa en dar una apariencia realista a las interfaces gráficas.

Por realista no me refiero solo al aspecto de los elementos, sino también a su comportamiento.

El aspecto

Los objetos se crean de forma tal que perecen reales. Para lograrlo se usan sombras para dar la impresión de niveles de profundidad, así como tonos opacos y nítidos en dependencia del nivel en que se encuentre el objeto.

Existen más pautas para lograr un diseño material de los elementos relacionados con el aspecto. La documentación completa la puedes encontrar aquí.

El comportamiento

Esta es la característica que hace única a esta tendencia. Se sigue la filosofía de que los objetos no aparecen y desaparecen solos, sino que existe una transición en cada acción que se realiza. Es por ello que se utilizan muchas animaciones para lograr una sincronización fluida entre los elementos de la interfaz gráfica.

Paper Collapse plugin

Este es un plugin jQuery creado por Alexander Rühle que permite lograr el efecto mencionado anteriormente.

El plugin requiere que cada fila del acordeón (formada por título y contenido) esté encerrada en un div con clase collapse-card, por lo que debe seguir la siguiente estructura:

<div class="collapse-card">
  <div class="title">
    <i class="fa fa-question-circle fa-2x fa-fw"></i>
    <span><!-- texto opcional posiciónado a la derecha --></span>
    <strong><!-- Título de la fila --></strong>
  </div>
  
  <div class="body">
    <!-- cuerpo de la fila -->
  </div>
</div>

En el snippet anterior se utiliza Font Awesome para la iconografía, pero si lo deseas puedes utilizar otra.

Si deseas crear 3 filas debes copiar el código anterior 3 veces. El plugin se inicializa de forma automática, solo debes incluirlo en el documento HTML (ambos ficheros js y css):

<script src="paper-collapse.min.js"></script>
<link rel="stylesheet" href="paper-collapse.min.css">

Aclarar además que no se necesita un padre con alguna clase en especial para los elementos del acordeón, puedes ponerlo tanto dentro del elemento body, como cualquier div, section etc.

A continuación te dejo un ejemplo el cual puedes ver en vivo y modificarlo si deseas.




>
¿Sabías que…?


Material Design aplica principios de objetos reales incluyendo su comportamiento.




>
Una tendencia, todos los dispositivos


Material Design está diseñado para ser aplicado tanto en dispositivos móviles de forma nativa, como en interfaces para la web.




>
Aprende sin límites – MyCyberAcademy


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

See the Pen ogNmWv by Dimitri Lopez (@mycyberacademy) on CodePen.

Mejoras al acordeón

Puedes utilizar el codepen anterior para experimentar con el demo. Trata de esconder las demás filas cuando se da clic en cualquiera de ellas.
Lo puedes lograr utilizando los eventos que brinda el plugin:

  1. onShow
  2. onHide

Hasta aquí la charla sobre jQuery, Material Design y los acordeones. Cualquier pregunta o sugerencia no dudes en dejarla en los comentarios.