Actualmente uso este código de spoiler para ocultar cosas:
<div class="pre-spoiler"> <input name="Deutsch" type="button" onClick="if (this.parentNode.getElementsByTagName('div')[0].style.display != 'none') { this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'ButtontextSpoiler'; } else { this.parentNode.getElementsByTagName('div')[0].style.display = 'block'; this.value = 'ButtontextSpoiler'; }" value="ButtontextSpoiler"> <div class="spoiler" style="display: none;"> <br>Text </div>El único problema es: todo lo que hay dentro de ese código de spoiler se obtiene al cargar la página.
Me gustaría que el contenido se cargue solo si se abre el botón de spoiler.
¿Es esto posible de alguna manera?
Investigué la "carga diferida", pero parece innecesariamente complicado.
Escribir en dom sobre la apertura del spoiler también parece extraño, especialmente porque tengo muchas líneas que deben "detenerse" dentro de la etiqueta del spoiler.
No importa..
Usé CSS y un iFrame.
Ahí:
<!---------------Newart-------------------> <style> .dropbtn { background-color: #04AA6D;color: white;padding: 16px;font-size: 16px;border: none; } .dropdown { position: relative;display: inline-block; } .dropdown-content { display: none;position: absolute;background-color: #f1f1f1;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1; } .dropdown-content a { color: black;padding: 12px 16px;text-decoration: none;display: block; } .dropdown-content a:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #3e8e41;} </style> </head> <body> <div class="dropdown"> <button class="dropbtn">RecentArt</button> <div class="dropdown-content"> <a href="0newart.html" target="iframemyart">Newart</a> </div> <br> </div> </body> <br><iframe src="Click_-The_Rent_Art_Menu_for_new_art" name="iframemyart" width="80%" height="500" scrolling="yes" frameborder="0" allowtransparency="true"></iframe> <!---------------Newart------------------->