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.
Deja una respuesta