Expand/Collapse, Mostrar/Ocultar (2)

Esta es otra forma de Ocultar/Mostrar, ya vimos otra forma en esta entrada.

Sólo se requiere poner en la entrada, widget, etc. el siguiente código:

<div class="pre-spoiler">
<span style="float: left; padding-top: 2px;"></span>
<input id="xs" value="Ver más" style="margin-left: 50px; padding: 0px;
width: 80px; font-size: 14px; font-family: trebuchet ms;" 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 = 'Ver más';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">

COLOCAMOS AQUI LA PARTE A OCULTAR

</div>
</div>
</span>

Cambios en el código del botón:

margin-left: 50px; Distancia del botón al borde de la entrada desde la izquierda.
width: 80px; Ancho del botón. Si el texto es más largo hay que aumentar su tamaño aquí.
font-size: 14px; Tamaño de la letra del texto.
font-family: trebuchet ms; Tipo de letra del texto.


Añadir CSS

Para adaptar el botón al diseño de nuestro blog, añadiremos unas líneas en el código CSS de la plantilla antes de ]]>



background: #fea502; Aquí cambiamos el color de fondo del botón.
color: #000; Aquí cambiamos el color del texto del botón.
border: 2px solid #6a8e20; Aquí cambiamos el grosor, tipo y color del borde del botón.


Fuentes: Trucos Key y El escaparate de Rosa.

3 comentarios:

Staff | Damian :)

Hola pasate por mi blog www.tupeliculaonline.blogspot.com si queres compartir enlaces te dejo mi mail (tupelicula0nline@hotmail.com la 0 es un cero) mandame un mail y pasame los datos del blog y demas.

daniel calbimonte

Me sirve y agrada este código.
Hay alguna forma de usar un link en vez de botón para mostrar contenido ?

jesgo

daniel calbimonte, mira esta entrada, espero que te sirva.

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License