Desplegables y ventanas que funcionan sin una línea de JavaScript (o con muy poca), y las piezas para crear componentes propios.
<details>: Un bloque que se abre y se cierra al pulsar su resumen (<summary>).
<summary>: El texto visible de un <details>.
Desplegables y ventanas que funcionan sin una línea de JavaScript (o con muy poca), y las piezas para crear componentes propios.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Un bloque que se abre y se cierra al pulsar su resumen (<summary>). Preguntas frecuentes, «ver más», acordeones. Con open empieza abierto; si varios comparten name, solo uno queda abierto a la vez.
Esencial. El texto visible de un <details>: al pulsarlo se abre o se cierra. Va el primero dentro.
Una ventana de diálogo. Con showModal() se abre encima de todo, bloquea el resto de la página y se cierra con Escape. Un botón dentro de un formulario con method="dialog" la cierra.
Un fragmento de HTML que no se muestra: JavaScript lo copia tantas veces como haga falta (una tarjeta por proyecto, por ejemplo).
Un hueco dentro de un componente web (shadow DOM) que se rellena con el contenido que pones al usar el componente. Es avanzado: lo usarás si creas tus propios elementos.
Desplegables y ventanas que funcionan sin una línea de JavaScript (o con muy poca), y las piezas para crear componentes propios.
Código del tema: <details>
Desplegables y ventanas que funcionan sin una línea de JavaScript (o con muy poca), y las piezas para crear componentes propios.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Un bloque que se abre y se cierra al pulsar su resumen (<summary>). Preguntas frecuentes, «ver más», acordeones. Con open empieza abierto; si varios comparten name, solo uno queda abierto a la vez.
Esencial. El texto visible de un <details>: al pulsarlo se abre o se cierra. Va el primero dentro.
Una ventana de diálogo. Con showModal() se abre encima de todo, bloquea el resto de la página y se cierra con Escape. Un botón dentro de un formulario con method="dialog" la cierra.
Un fragmento de HTML que no se muestra: JavaScript lo copia tantas veces como haga falta (una tarjeta por proyecto, por ejemplo).
Un hueco dentro de un componente web (shadow DOM) que se rellena con el contenido que pones al usar el componente. Es avanzado: lo usarás si creas tus propios elementos.