Details & Summary – Crea elementos desplegables ocultos con HTML

Cuando pensamos en interactividad en la web, seguramente lo primero que se nos venga a la cabeza. Pero en los últimos años, gracias al avance de HTML, disponemos de algunos elementos interactivos que van a hacer nuestra vida más fácil. Hoy nos queremos centrar en uno de ellos, que nos va a permitir crear elementos desplegables, con los que poder mostrar y ocultar contenido con solo hacer un clic. Estamos hablando de details y summary.

Estos dos elementos se añadieron hace unos años en HTML 5.1, y los podemos usar en diferentes situaciones. Una de las más evidentes es a la hora de crear una página de FAQs, las típicas preguntas y respuestas que existen en muchas webs. En muchos casos, estas FAQs son preguntas que, al hacer clic sobre ellas, abren un desplegable con la respuesta. Son muy eficaces cuando tenemos una página con mucho contenido, pero no queremos que sea muy abrumador para el usuario. Aplicar details y summary en este tipo de páginas es muy eficaz, y hacemos que el usuario solo vea el contenido que le interese.

Pero existen otros usos que le podemos dar, como crear un botón con un menú desplegable, o el típico párrafo de spoilers, que solo se muestra al hacer clic. En el artículo de hoy, veremos como hacer una pequeña FAQ totalmente funcional, solo usando HTML y CSS. Pero antes que nada, y como siempre pasa en estos casos, es conveniente saber la compatibilidad de estos elementos con los navegadores webs más usados.

En esta imagen de Can I Use, vemos como está muy extendido, quedándose fuera Opera Mini e Internet Explorer. En estos casos, y según nuestra necesidades y requerimientos, podemos usar JS cuando nuestra web se abra en estos navegadores. O si no queremos usar JS, lo que ocurrirá es que el contenido oculto siempre se va a mostrar, y no lo podremos ocultar al hacer clic.

Una vez hecha esta pequeña introducción, entremos en harina. Vamos a ver cuales son los diferentes elementos que componen details y summary, que hacen cada uno de ellos y, por último, como darles estilo gracias a CSS.

Conociendo los elementos HTML details y summary

El elemento HTML details se compone de básicamente de las siguientes partes:

• La etiqueta details, que es el contenedor que alberga tanto lo que se va a mostrar siempre, como el contenido interactivo que se puede mostrar y esconder.
• La etiqueta summary, que siempre va a ir anidada dentro de details, y que es el elemento visible y la zona clicable para mostrar, o esconder, el resto del contenido.
• Y por último, el contenido que vamos a poder mostrar y esconder a nuestro gusto, y que también va anidado dentro de details.

Por resumir, este sería el código HTML del que estamos hablando:

<details>
    <summary>Este es el texto de nuestro summary, y si lo clicamos veremos el contenido oculto</summary>
    <p>Y este es el texto oculto que se muestra al desplegarse.</p>
</details>

Y se vería así al insertarlo en la web:

Si hacemos clic sobre él, veremos como se despliega el contenido oculto. No es muy llamativo, pero más adelante veremos como lo podemos modificar con un poco de CSS. Si queremos hacer varios elementos de este tipo para construir, por ejemplo, una FAQ, habría que usar un elemento details por cada elemento desplegable que queramos tener, cada uno con su correspondiente summary y su contenido oculto. Aunque nosotros hemos utilizado para este ejemplo un párrafo para insertar un texto, podemos tener varios párrafos u otro tipo de elementos, tales como listas ordenadas o desordenadas, tablas, etc.

Y hablando de este contenido oculto, si recargáis la página podéis notar de que este details siempre se muestra por defecto oculto, y hay que clicarlo para que se muestre. Pero a veces no vamos a querer esto, sino que haya alguno que se muestre desplegado por defecto. Vamos a poder conseguir esto gracias al atributo open.

Usando el atributo open

El atributo open lo usaremos en HTML en nuestra etiqueta details, y nos va a permitir que el elemento desplegable este siempre abierto al recargar la página. Esto nos puede servir para mostrar cierta información importante que queramos que se vea sin ningún tipo de interactividad por parte del usuario, pero que queremos que forme parte de nuestros elementos desplegables.

Vamos a ver como sería el código HTML de un elemento details abierto por defecto, y otro cerrado.

<details open>
    <summary>Este elemento se va a mostrar siempre abierto al cargar la web, aunque podemos cerrarlo haciendo clic en él</summary>
    <p>Y este es el texto que, como tenemos el atributo open en nuestra etiqueta details, siempre vamos a ver al recargar la web.</p>
</details>
<details>
    <summary>Este elemento se va a mostrar siempre cerrado al recargar la web, y no se abrirá hasta que hagamos clic en él</summary>
    <p>Este es el texto oculto que se muestra al desplegarse.</p>
</details>

Y así quedaría dentro de nuestra web:

Este atributo, aparte de esta función, nos va a ayudar a dar estilo a nuestro details solo cuando está desplegado, y que tenga un aspecto diferente a cuando está cerrado. Es decir, si en CSS damos un estilo a un elemento sin usar el atributo open, se aplicará a dicho elemento tanto cuando esté cerrado como abierto. Pero si damos estilos CSS con el atributo open, solo se aplicará cuando esté abierto. Muy importante tener esto en mente a la hora del orden de nuestro CSS, ya que se aplican los estilos en cascada.

¿Y que hacemos con la flecha de nuestro details?

Si os habéis ido fijando, junto a nuestro summary siempre aparece una pequeña flecha triangular de color negro apuntando hacia la izquierda, que apunta hacia abajo si tenemos el desplegable abierto. Por defecto, esta flecha siempre se va a mostrar, pero podemos ocultar añadiendo una simple línea de CSS a nuestra etiqueta details:

details {
    list-style: none;
}

Tan sencillo como esto. Otra opción es utilizar un icono diferente que reemplace a la flecha, o incluso que esté en una posición diferente. Para ello, vamos a meternos de lleno a cambiar el estilo de nuestro elemento desplegable gracias a CSS.

Dando estilo a nuestro details con CSS

Antes de entrar en esta parte, si no estáis muy habituados a trabajar con este lenguaje, os recomendamos echar un vistazo a nuestra guía de iniciación a CSS, que seguro que os sirve de apoyo para empezar. Una vez dicho esto, vamos a montar un pequeño proyecto que consiste en un FAQ con cinco elementos desplegables, a los que vamos a dar estilo con CSS. Para ir poco a poco, dividiremos esta parte en cada uno de los elementos de componen nuestro details, así será menos complejo de seguir cada paso.

Nosotros vamos a usar CodePen, pero también podéis usar cualquier otra herramienta del estilo, o hacerlo en local en vuestro ordenador. Dicho todo esto, vamos a empezar a dar estilo a nuestro details.

Aplicando estilos al elemento details

Como hemos dicho al principio, el elemento HTML details es el contenedor del resto de elementos. Aquí queremos que cuando el este sin desplegar, el elemento tenga un color de fondo #f6f8fa, pero si está abierto sea blanco. Esto nos va a servir para diferenciar visualmente cuando esta el elemento desplegado o no, y para saber como usar el atributo open en CSS. Este sería nuestro código:

details {
    background-color: #f6f8fa; /* color de fondo cuando no está desplegado */
}

details[open] {
    background: #ffffff; /* color de fondo cuando está desplegado */
}

Aplicando estilos al elemento summary

Con nuestro summary vamos a hacer algo parecido, y es que tenga un estilo diferente según esté el desplegable abierto o cerrado. En esta ocasión, vamos a hacer que el texto del summary esté en negrita si tenemos el elemento desplegado. También queremos sustituir la flecha por defecto, ya que es un poco sosa, y lo primero será ocultar la que tenemos por defecto. Así sería el CSS que necesitamos:

details summary {
    font-weight: 400; /* peso de la tipografía cuando  no está desplegado */
    list-style: none; /* ocultamos la flecha */
    cursor: pointer; /* cambia el cursor del puntero */
}

details[open] summary {
    font-weight: 600; /* peso de la tipografía cuando está desplegado */
}

También hemos añadido otra línea, cursor: pointer;. Esta línea es una de las primeras que suelo añadir al trabajar con details, y lo que hace es cambiar el puntero del ratón por una manita. Así, estoy explicitando que es un elemento al que se le puede hacer clic. Puede parecer algo obvio, pero a veces muchos visitantes de nuestra web pueden creer que es un texto más, y no saber que es clicable. Y con estas pequeñas cosas ganamos en experiencia de usuario.

Aplicando estilos al contenido oculto

El estilo del contenido oculto tiene poco que explicar. En nuestro caso, vamos a hacer que tenga un color de fondo diferente al del details, así podemos distinguir de un vistazo en nuestro FAQ que es la pregunta y cual su respuesta.

details p {
    background: #f6f8fa; /* color de fondo del contenido oculto */
}

Aplicando estilos a la flecha de details

Para la nueva flecha, vamos a usar los pseudo elementos CSS, y más concretamente ::before. Con los pseudo elementos podemos añadir diferente tipo de contenido: un texto, una imagen, un icono de FontAwesome… En este caso quiero hacer algo diferente, por lo que vamos a insertar un emoji de un dedo apuntando hacia abajo. Este emoji lo he conseguido del repositorio de HTML Special Characters Codes, que podéis copiar y pegar directamente en vuestro archivo CSS. También quiero cambiarlo de posición, y que no esté en el lateral izquierdo, sino en el derecho. Esto lo solucionaremos de forma sencilla gracias a un position: absolute.

details {
    position: relative;
}

details summary::before {
    position: absolute;
    content: "👇";
    font-size: 1.75rem;
    top: 10px;
    right: 16px;
}

Ahora tengo un problema, y es que mi emoji apunta en la misma dirección este el desplegable cerrado o abierto. No hay problemas podemos girarlo de forma sencilla gracias al atributo open. Bueno, quiero ir un paso más allá, y añadirle una pequeña animación:

details[open] summary::before {
    -webkit-animation: rotate-emoji 0.6s ease-in-out both;
    animation: rotate-emoji 0.6s ease-in-out both;
}

@-webkit-keyframes rotate-emoji {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

Y este es el CodePen que hemos construido nosotros:

Podéis explorarlo, ya que tiene algunas líneas extras de CSS con la que hemos dado un poco más de estilo a nuestro FAQ: colores, tipografías, sombras, bordes… Todo por hacerlo algo más agradable a la vista.

Este ha sido nuestro ejemplo, pero podéis hacer las variaciones que queráis para testear diferentes opciones. Os dejo algunas ideas que se pueden aplicar:

• Cambiar el color del fondo del summary cuando está desplegado.
• Hacer que el contenido oculto sea una lista.
• Hacer un desplegable dentro un un desplegable.

¿Os atrevéis a hacer alguno de estos retos?. Si hacéis alguno, podéis escribirnos en los comentarios para que lo podemos ver todos!

Conclusión

Como hemos podido ver, los elementos HTML interactivos details y summary pueden sernos de mucha utilidad para construir ciertas partes de un proyecto web que queramos que se puedan mostrar u ocultar con solo hacer un clic, y ahorrarnos el uso de otros lenguajes de programación, como Javascript. Con lo que ello supone para nuestro workflow y la velocidad de carga de nuestra web. Además, es tremendamente customizable gracias a CSS, y podemos darle casi cualquier estilo que podamos imaginar con una pocas líneas de código. Desde lo más sencillo, como es cambiar el color de fondo o la tipografía, hasta cambiarle iconos y añadir animaciones.

Esperemos que os haya servido de ayuda este pequeño tutorial a todos los que no lo conocíais. Y, como siempre, están abiertos los comentarios antes cualquier duda o sugerencia que nos queráis hacer llegar.