Tengo un código javascript tan pequeño (lo uso en Markdown):
<button title="Click to show answer" type="button" class="btn btn-primary" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''} else{document.getElementById('spoiler') .style.display='none'}"> show/hide </button><div id="spoiler" style="display:none"> *** Hidden Text *** </div>El problema es que si quiero hacer varios botones en una página para ocultar el texto, entonces necesito cambiar el nombre de spoiler a spoilerN 4 veces.
Preguntas:
(Mínimo) ¿Es posible enviar Id de forma compacta a una variable separada en este fragmento de código?
(Máximo) ¿Es posible generar automáticamente una variable? ¿Para que el propio código reutilice la variable cada vez que se declara un nuevo botón?
Sería mejor eliminar el estilo en línea Y javascript, y hacer esto en css con algo de javascript para controlar la adición y eliminación de clases de css.
Suponiendo que el botón es siempre un hermano del div spoiler, puede hacer esto al tener solo una clase en el div spoiler y adjuntarlo automáticamente a cada instancia en una página:
document.querySelectorAll(".spoiler").forEach(s => { s.previousSibling.addEventListener("click", () => { s.classList.toggle("show"); }); }) .spoiler{ display:none } .show{ display:block } <button title="Click to show answer" type="button" class="btn btn-primary"> show/hide </button><div class="spoiler"> *** Hidden Text *** </div>¡La respuesta de Jamie resultó ser muy similar a la verdad! ¡Gracias!
Pero en Markdown, mis colegas y yo hicimos una serie de pequeñas ediciones porque la solución no funcionó de inmediato. La versión de trabajo se ve así:
Primer fragmento (Uno, al comienzo del documento (o en style.css para todos los archivos Rmd en bookdown)):
.spoiler{ display:none } .show{ display:block }La segunda pieza (en realidad textos ocultos)
<button title="Click to show answer" type="button" class="btn btn-primary"> show/hide </button><div class="spoiler"> *** Hidden Text *** </div> <button title="Click to show answer" type="button" class="btn btn-primary"> show/hide </button><div class="spoiler"> *** Hidden Text2 *** </div>La tercera pieza (una, al final del archivo Rmd) Cambió el anterior a anteriorElementSibling
document.querySelectorAll(".spoiler").forEach(s => { s.previousElementSibling.addEventListener("click", () => { s.classList.toggle("show"); }); })¡Gracias por tu ayuda!