La Etiqueta DETAILS

La etiqueta <details> permite crear secciones plegables (disclosure widgets) que los usuarios pueden expandir o contraer para mostrar u ocultar contenido adicional. Es ideal para organizar información sin sobrecargar la interfaz, como FAQs, menús desplegables o contenido opcional.

Sintaxis básica

<details>
  <summary>Título del elemento</summary>
  Contenido oculto/mostrable.
</details>

• <summary>: Define el título clickeable (obligatorio).
• Atributo open: Muestra el contenido por defecto.

<details open>
  <summary>Ver más</summary>
  <p>Contenido visible inicialmente.</p>
</details>

Casos de uso comunes

Preguntas frecuentes (FAQ)

<details>
  <summary>¿Cómo restablezco mi contraseña?</summary>
  <p>Visita la página de configuración y sigue los pasos indicados.</p>
</details>

Código o ejemplos colapsables

<details>
  <summary>Mostrar código HTML</summary>
  <pre><code>&lt;h1&gt;Hola Mundo&lt;/h1&gt;</code></pre>
</details>

Menús desplegables avanzados

<details>
  <summary>Opciones avanzadas</summary>
  <form>
    <label><input type="checkbox"> Opción 1</label>
    <label><input type="checkbox"> Opción 2</label>
  </form>
</details>

Atributos clave

Atributo	Descripción
open	Muestra el contenido al cargar la página
id	Identificador único para estilos o JavaScript
class	Clases CSS personalizadas

Accesibilidad

• Teclado: Se puede navegar con Tab y activar con Enter.

• Lectores de pantalla: Anuncian el estado (abierto/cerrado).

• Buenas prácticas:

  • Usar <summary> descriptivo.

  • Evitar contenido crítico dentro de <details>.

Estilización con CSS

Personaliza el diseño del widget:

details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem;
  margin: 1rem 0;
}

summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.5rem;
  list-style: none; /* Oculta el marcador predeterminado */
}

summary::-webkit-details-marker {
  display: none; /* Oculta el marcador en Chrome */
}

details[open] {
  background: #f8f9fa;
}

Icono personalizado:

summary::before {
  content: "▶";
  margin-right: 0.5rem;
}

details[open] summary::before {
  content: "▼";
}

Errores comunes

Olvidar <summary>

<!-- Incorrecto -->
<details>
  <p>Contenido sin título</p>
</details>

Anidación compleja

<!-- Evitar estructuras confusas -->
<details>
  <summary>Menú</summary>
  <details>
    <summary>Submenú</summary>
    <!-- ... -->
  </details>
</details>

Usar para contenido esencial

<!-- Incorrecto -->
<details>
  <summary>Términos y condiciones</summary>
  <p>Información legal importante...</p>
</details>

Ejemplos avanzados

Acordeón interactivo

<div class="acordeon">
  <details>
    <summary>Sección 1</summary>
    <p>Contenido de la sección 1.</p>
  </details>
  <details>
    <summary>Sección 2</summary>
    <p>Contenido de la sección 2.</p>
  </details>
</div>

Animación de despliegue

details[open] p {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

Buenas prácticas

Mantener el contenido breve: Evitar párrafos largos dentro de <details>.

Usar JavaScript para interacciones complejas:

document.querySelector('details').addEventListener('toggle', function(e) {
  if (this.open) {
    console.log('El elemento se abrió');
  }
});

Probar en múltiples navegadores: Aunque es compatible en navegadores modernos, verificar en entornos antiguos.

Compatibilidad

Navegador	Soporte
Chrome	Sí (v12+)
Firefox	Sí (v49+)
Safari	Sí (v6+)
Edge	Sí (v79+)

Conclusión:

La etiqueta <details> es perfecta para:

• Reducir la sobrecarga visual en páginas con mucho contenido.
• Crear interfaces interactivas sin JavaScript.
• Mejorar la experiencia del usuario en FAQs o menús.

¡Úsala para hacer tu contenido más limpio y accesible! ????