Este truco es muy bueno, se lo recomiendo a todos. Bueno, sirve para crear un botón cualquiera, texto o imagen que cuando tienes un contenido muy largo o muy extenso, puedas poner un botón, texto o imagen que diga: Leer más, seguir leyendo, etc...
He aquí un ejemplo:
Podemos poner cualquier cosa dentro de este, un video, una imagen o un sonido; cualquier cosa.
Para usarlo, tienes que poner el siguiente código, cada vez que lo quieras usar:
<div class="divspoiler">
<input type="button" value="Mostrar" 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 = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenio que queremos ocultar
</div></div>
También puedes poner una imagen y algo que diga Mostrar/Ocultar. Ejemplo:
Si prefieres, puedes usar una imagen:
Para poner el de la imagen pongan el siguiente código html:
<div class="divspoiler">
<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenio que queremos ocultar
</div></div>
Muy bueno ¿verdad? y práctico. Hasta la próxima entrada.
Fuente: Ciudad blogger
Falta los javascripts donde están
muy bueno lo voy a usar para un software educativo en html
gracias, esto era lo que necesitaba, cambiar el estilo del boton con una imagen esta genial :D
hola amigo me gusto este boton pero me gustaria colocar varias deseguido en forma de menu como puedo hacerlo??
hola buen dia oye tengo un problemita no se mucho sobre html, intente poner el codigo de spoiler con imagen y al momento de ponerlo con la url de una imagen no me da la entrada talcual la tienes solo me da imagen seguido de codigo visible que puede estar pasando o que fue lo que realice mal. de antemano gracias. la pagina esta con un boton previo que no me agrada quisiera solo dar click a la imagen y desplegar la informacion.