Details y summary en HTML 5

Hola a todos, hoy os voy a explicar como utilizar la etiqueta details en HTML 5.

La etiqueta details de HTML 5 se utiliza para ocultar información y poderla desplegar cuando el usuario quiera.

Se suele acompañar de la etiqueta summary para mostrar el titulo de la etiqueta details.

Veamos un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Details y summary</title>
</head>
<body>
    <details>
        <summary>Soy un details, hazme click</summary>
        <p>Soy el texto del details</p>
    </details>
</body>
</html>

Este es el resultado:

Soy un details, hazme click

Soy el texto del details

Con el atributo open, hará que se abrá automáticamente.

Soy un details ya abierto, hazme click

Soy el texto del details

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *