Bueno te dejo dos opciones, la primera usa spoiler: este es el codigo, lo pegas donde vayas a ocultar el contenido:
Código: <div class="pre-spoiler"> <span style="float:left; padding-top: 2px;">AQUI COLOCAN EL TEXTO KE SE VERA PARA DAR CLIC</span> <input type="button" value="Mostrar" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}"> </div> <div> <div class="spoiler" style="display: none;">AQUI ESCRIBEN TODO EL CONTENIDO QUE OCULTARAN</div> </div>
y el otro es este:
se trata de 2 codigos, que cumplen la funcion de leer mas.....o sea que si tienes mucho contenido y lo kieres ocultar para no tener que crearte otra pagina jejjejeje, primero pegas este codigo en "TEXTO POR DEBAJO DE LA PAGINA"
Código: <style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
Luego este otro codigo que cada vez ke lo uses debes cambiarle el nombre,por ejemplo este mio le puse de nombre "gatos" pero si lo kiero volver a usar, tengo que ponerle otro nombre cualkiera, siempre es un nombre unico por cada vez ke lo utilicemos.El codigo se pega donde kieras mostrarlo, si es en una pagina debes activar fuente html y copiar
Código: <div style="text-align: left;">
<a href="javascript:void(0);" onclick="expandcollapse('gatos')">
<img src="AQUI LA URL DE LA IMAGEN QUE SE VERA" /></a> </div>
<div id="gatos" class="texthidden">
ENTRE ESTAS ETIQUETAS DIV COLOCAR TODO LO QUE PERMANECERÁ OCULTO.
</div>
Si no quieres colocar una imagen, sino que quieres texto solamente, pues simplemente borra esta parte:
Código: <img src="AQUI LA URL DE LA IMAGEN QUE SE VERA" /></a>
y la sustituyes por el texto que quieras mostrar, por ejemplo leer mas jejejjeje, se expande cuando se da clic alli y se contrae cuando volvemos a dar clic, genial no?
Se puede ocultar lo ke se kiera, videos, imagenes, de todo, jejej
Probado y funciona perfectamente. |
salu2
