El elemento details en HTML5: Cómo ocultar detalles

HTML5

Este elemento details forma parte de HTML5 y tiene como finalidad ocultar una sección del documento aunque puede ser mostrada para revelar información adicional. Viene a ser una caja que se colapsa permitiendo añadir más información.

Antes de HTML5 la única manera de realizar esto era con JavaScript. Sin embargo, con HTML5 solo basta con usar las etiquetas adecuadas. Desafortunadamente, el elemento details no funciona en todos los navegadores.

Chrome Explorer/Edge FireFox Safari Opera
Versión 12.0 No sorpotado 48.0(Próximamente) 6.0 15.0

Cómo usar el elemento details

HTML5 facilita mucho su uso. Mostraré un ejemplo bastante sencillo.

XHTML
1
2
3
4
5
6
7
8
<details>
  <summary>Detalles Llorem Ipsum</summary>
  <ul>
    <li><cite>Lorem ipsum dolor sit amet.</cite></li>
    <li><cite>Donec bibendum mattis vulputate.</cite></li>
    <li><cite>Mauris vitae massa vitae metus.</cite></li>
  </ul>
</details>

Al principio sólo aparecerá lo que está dentro de summary pero, una vez clicado en él se mostrará el contenido.

Se puede usar el CSS para retocarlo a nuestro gusto.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
details {
    border-radius: 3px;
    background: #3F9;
}
 
details summary {
    font-size: 17px;
    vertical-align: top;
    background: #333;
    color: #FFF;
    border-radius: 3px;
    padding: 5px 10px;
    outline: none;
}
 
/*Cuando esté abierto*/
details[open] summary {
    background: #06C;
    color: #333;
}
 
/*Ocultar el icono por defecto*/    
details summary::-webkit-details-marker {
    display: none;
}

elemento details abierto html5 css

Ejemplo de details personalizado

En caso de no tener summary, se definirá uno por defecto. Además, summary sólo puede ser usado como hijo del elemento details y tiene que ser el primero.

Para que el contenido del details se muestre por defecto hay que usar el atributo open.

XHTML
1
<details open>

Y hasta aquí el uso de este elemento. Espero que en un futuro se pueda usar perfectamente en todos los navegadores ya que lo veo una herramienta bastante útil. A seguir picando 🙂