En este artículo, definimos detalles adicionales que el usuario puede ver u ocultar Al usar el elemento de detalles en el documento, se usa para el contenido/información que inicialmente está oculta pero que podría mostrarse si el usuario desea verla.
Esta etiqueta se utiliza para crear un widget interactivo que el usuario puede abrir o cerrar. El contenido de la etiqueta de detalles es visible cuando se abren los atributos establecidos.
Sintaxis:
<details>
<summary> Text content </summary>
<div> Content . . . </div>
</details>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Define additional details that the user can view or hide.
</title>
<style>
summary {
font-size:40px;
color:#090;
font-weight:bold;
}
</style>
</head>
<body>
<h2>
Define additional details that the user can view or hide
</h2>
<details>
<summary>GeeksforGeeks</summary>
<p>A computer science portal for geeks</p>
<div>It is a computer science portal where you
can learn programming.</div>
</details>
</body>
</html>
Salida:
antes de hacer clic en los detalles Elemento: 
después de hacer clic en el botón:
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA