Cómo crear un spoiler que solo se cargue al hacer clic

Agustinn · 23 Feb 2015

Buenas, estoy intentado poner un spoiler pero que no se cargue hasta hacer click sobre el.
Aca les pongo el ejemplo que no me funciona:
<div class="divspoiler">

<input type="button" value="Opcion 2" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Opcion 2'; }" />
</div><div><div class="spoiler" style="display: none;">

<iframe id="ciframe" width="800" height="450" src="http://vaughnlive.tv/embed/video/beto_3?viewers=true&autoplay=false"></iframe>

</div></div></center>

lo que quiero hacer es que no cargue el iframe hasta que haga click en "opcion 2", porque sino aunque este oculto se escucha el sonido del iframe.
Desde ya les agradezco su ayuda!

Cicklow · 23 Feb 2015

HTML:

<div class="divspoiler">

<input type="button" value="Opcion 2" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; document.getElementById('ciframe').src= 'http://vaughnlive.tv/embed/video/beto_3?viewers=true&autoplay=false'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Opcion 2'; document.getElementById('ciframe').src= 'about:blank'; }" />
</div><div><div class="spoiler" style="display: none;">

<iframe id="ciframe" width="800" height="450" src="about:blank"></iframe>


</div></div></center>

lo que se hace es cargar nada en el iframe, luego cuando le dan click cargar la url

Agustinn · 23 Feb 2015

Genio!, Muchas Gracias, funciono a la perfeccion! 🙂

Cómo crear un spoiler que solo se cargue al hacer clic

Agustinn

Cicklow

Agustinn

Temas similares