El Atributo ONTOGGLE

El atributo ontoggle está asociado al elemento details y se activa cuando el usuario expande o contrae su contenido.

El atributo ontoggle está asociado al elemento <details> y se activa cuando el usuario expande o contrae su contenido. Es esencial para crear interfaces interactivas con secciones colapsables.

???? Sintaxis básica

<details ontoggle="manejarToggle(event)">
  <summary>Ver más</summary>
  <p>Contenido oculto que se muestra al expandir</p>
</details>

Run HTML

// Método alternativo con JavaScript
document.getElementById("miDetails").addEventListener("toggle", (event) => {
  // Lógica aquí
});

???? Características clave

Exclusivo para <details>: Solo funciona con este elemento.
Evento de cambio de estado: Se dispara al abrir o cerrar.
Acceso al estado: Usar event.target.open para saber si está expandido.

???? Ejemplos prácticos

1. Contador de aperturas

<details id="miDetalles" ontoggle="contarAperturas(event)">
  <summary>Acerca de nosotros</summary>
  <p>Información de la empresa...</p>
</details>
<p>Aperturas: <span id="contador">0</span></p>

<script>
let contador = 0;
function contarAperturas(event) {
  contador++;
  document.getElementById("contador").textContent = contador;
  console.log("Estado actual:", event.target.open ? "Abierto" : "Cerrado");
}
</script>

Run HTML

2. Sistema de acordeón (FAQ)

<div class="acordeon">
  <details ontoggle="manejarAcordeon(event)">
    <summary>Pregunta 1</summary>
    <p>Respuesta 1...</p>
  </details>
  
  <details ontoggle="manejarAcordeon(event)">
    <summary>Pregunta 2</summary>
    <p>Respuesta 2...</p>
  </details>
</div>

<script>
function manejarAcordeon(event) {
  if (event.target.open) {
    // Cerrar otros detalles al abrir uno nuevo
    document.querySelectorAll("details").forEach(detalle => {
      if (detalle !== event.target) detalle.open = false;
    });
  }
}
</script>

<style>
.acordeon details {
  margin: 10px;
  border: 1px solid #ddd;
}
.acordeon summary {
  cursor: pointer;
  padding: 10px;
  background: #f5f5f5;
}
</style>

Run HTML

???? Casos de uso avanzados

1. Animaciones CSS personalizadas

<details ontoggle="animarContenido(event)">
  <summary>Ver animación</summary>
  <div class="contenido-animado">
    ¡Contenido que aparece con efecto!
  </div>
</details>

<style>
.contenido-animado {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

details[open] .contenido-animado {
  max-height: 200px; /* Altura máxima esperada */
}
</style>

Run HTML

2. Integración con APIs externas

document.querySelector("details").addEventListener("toggle", async (event) => {
  if (event.target.open) {
    const respuesta = await fetch("https://api.example.com/data");
    const datos = await respuesta.json();
    event.target.querySelector("p").textContent = datos.contenido;
  }
});

⚠️ Consideraciones importantes

1. Compatibilidad

Navegador	Soporte
Chrome	✅ 12+
Firefox	✅ 49+
Safari	✅ 6+
Edge	✅ 79+

2. Mejores prácticas

Accesibilidad:

<details role="region" aria-live="polite">
  <!-- Contenido -->
</details>

Run HTML
Optimizar animaciones: Usar transform en lugar de height para mejor rendimiento.
Manejar estado inicial: Verificar open al cargar la página.

???? Solución de problemas comunes

1. El evento no se dispara

// Verificar si el elemento es <details>
console.log(event.target.tagName === "DETAILS"); // Debe ser true

2. Contenido dinámico no visible

/* Asegurar que el contenido tenga espacio para mostrarse */
details[open] div {
  display: block !important;
}

???? Conclusión

El atributo ontoggle permite:

Crear interfaces colapsables interactivas
Sincronizar contenido dinámico
Implementar acordeones y menús plegables
Mejorar la experiencia de usuario con animaciones

Ejemplo final avanzado (Tablero de control):

<details ontoggle="actualizarGrafico(event)">
  <summary>Estadísticas en tiempo real</summary>
  <div id="grafico"></div>
</details>

<script>
function actualizarGrafico(event) {
  if (event.target.open) {
    // Cargar datos solo cuando se expande
    cargarDatos().then(datos => dibujarGrafico("#grafico", datos));
  } else {
    limpiarGrafico("#grafico");
  }
}
</script>

Run HTML

Con este conocimiento, podrás implementar secciones interactivas eficientes y accesibles. ¡Experimenta con diferentes diseños! ????????