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 ]]>

#boton{
background: #fea502;
color: #000;
padding: 1px;
margin: 0px 0px 0px 3px;
border: 2px solid #6a8e20;
}

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.