Uso del elemento details para hacer una sección FAQ

Estudiamos el nuevo elemento "details", perteneciente al más reciente repositorio de HTML5, y lo utilizamos para crear una sección FAQ para nuestro sitio.

En la actualidad FAQ es una de las secciones de uso más común en los sitios de internet, por lo general consiste en una página sencilla donde se responden de manera global preguntas que los usuarios normalmente se plantean al momento de entrar y navegar en el sitio, ya sean dudas sobre un producto, sobre el contenido o incluso sobre la estructura de la empresa.

Es común hacer uso de elementos de listas para desplegar todas las preguntas con sus respuestas necesarias, pero existen ocasiones donde las respuestas tienden a ocupar mucho espacio en la interfaz, y en busca de mantener la sencillez de la sección muchos desarrolladores recurren a la creación de acordeones con JavaScipt para contraer la respuesta y únicamente mostrar la pregunta, así si el usuario necesita obtener la respuesta basta con dar un click sobre la pregunta para que ésta se despliegue.

En realidad la realización de acordeones no es nada del otro mundo, es bastante sencilla pero algo laboriosa si no estas acostumbrado a utilizarlos. Gracias a HTML5 actualmente contamos con un nuevo elemento que nos permite imitar dicha funcionalidad sin necesidad de incluir ninguna librería y con el simple uso de una etiqueta.

Elemento details

Este elemento forma parte del nuevo repositorio de HTML5 y actualmente solo funciona en la versión 12+ de Google Chrome, por lo que necesitarás disponer de este navegador para poder observar los resultados de este ejemplo. Su función consiste en permitirnos mostrar y ocultar contenido al momento de dar clic en otro elemento.

* Recuerda: este ejemplo sólo es compatible con navegadores Webkit (Chrome o Safari).

De seguro debes estar muy familiarizado con este tipo de efectos, pero la gran ventaja que representa este elemento es que dejamos atrás el uso de JavaScript. Con este elemento el texto que incluyamos como ancla lucirá con una flecha en su lado izquierdo y al momento de dar clic sobre él mostrará el resto del contenido que incluimos y al dar clic de nuevo lo ocultará.

Desarrollo de la sección FAQ

Lo primero que debemos hacer es crear nuestro elemento “details” dentro de la estructura HTML, para ello basta con agregar su etiqueta de apertura y clausura:

<details></details>

Lo siguiente consiste en agregar un título a la sección, para ello utilizamos la etiqueta “summary”, en nuestro caso la pregunta irá dentro de esta etiqueta:

<details>
   <summary>¿Cómo se llama el sitio?</summary>
</details>

Finalmente tenemos que agregar la respuesta y para ello podemos usar cualquier etiqueta, ya sea un párrafo para incluir texto, un elemento “img” para incluir alguna fotografía o incluso un elemento de tipo formulario. En nuestro caso bastará con un elemento “p”.

<details>
   <summary>¿Cómo se llama el sitio?</summary>
   <p>La Webera</p>
</details>
<details>
   <summary>¿Cúal es la URL?</summary>
   <a href="https://www.lawebera.es/">https://www.lawebera.es/</a>
</details>
<details>
   <summary>¿Cúal es el logo?</summary>
   <div id="logo"></div>
</details>

Estilo a la sección

El siguiente paso sería dar estilo a lo que hemos creado, para ello trataremos de imitar la manera en que jQuery y otros frameworks de JavaScript crean los estilos de acordeón, pero en este caso por cuestiones de practicidad mantendremos un estilo sencillo.

body{
  background: SteelBlue;
}
#wrap{
  margin: 0 auto;
  width: 500px;
}
details{
  border: 1px solid #CC0;
  padding: 5px;
  font-family: Arial;
  margin-bottom:5px;
  width:500px;
  background-color: #EEE;
}
summary{
  font-weight: bold;
  color: SteelBlue;
  font-size: 12px;
  cursor: pointer;
}
p, a, span{
  font-size: 12px;
  color: #666;
}
details summary::-webkit-details-marker {
  color: #CC0;
}
h2{
  color: #FFF;
  font-size: 40px;
  font-family: Helvetica;
  text-align: center;
}
#logo{
  background: SteelBlue url(https://www.lawebera.es/img/sprites.png) no-repeat;
  background-position: 0 -224px;
  height: 62px;
  width: 230px;
  margin-top: 11px;
  padding:3px;
}

Con el código anterior establecimos un borde para el elemento “details” de esa manera el usuario podrá identificar la sección completa, también cambiamos el tipo de puntero a “pointer” para que el usuario intuya que se debe de dar clic en ese elemento. El resto de los estilos simplemente son para dar una mejor presentación, por lo que se pueden ir adaptando a los gustos de cada quien.

Si lo que te interesa es dar estilo a la flecha que aparece en la sección, debes de saber que no es tan sencillo, para ello necesitas hacer uso de pseudo clases, que en este caso solo están disponibles para webkit, por lo que al igual que elemento “details” solo funcionan para ciertos navegadores. Un código como este cambiaría el color de la flecha:

details summary::-webkit-details-marker {
  color: #CC0;
}

Conclusión

Como pudimos observar es un efecto bastante sencillo, pero sin duda relevante. En un futuro es probable que tengamos más control sobre esta función, quizás mediante alguna tecla para aumentar su accesibilidad, pero sin duda esto ya representa una gran ventaja al tenerlo dentro de las funciones que HTML5 nos ofrece.