Mostrar u ocultar texto mediante botones Input.

Si os habeis fijado, en algunas ocasiones utilizo un botón para ocultar texto, como por ejemplo letras de canciones, de forma que los post no se alarguen demasiado. 

 

Ese truco lo he visto en el blog "el escaparate de rosa" (blog que recomiendo) y lo transcribo aquí:

El procedimiento es muy sencillo, se trata de colocar el código directamente en el editor de entradas de ésta manera:

<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 EL TEXTO A OCULTAR

</div>
</div>
 

Cambios que se pueden hacer en el código del botón:

margin-left: 50px; La distancia del botón al borde de la entrada desde la izquierda.
width: 80px; Ancho del botón. Si ponéis un texto más largo en el botón, tendréis que aumentar su tamaño aquí.
font-size: 14px; Tamaño de la fuente del texto.
font-family: trebuchet ms; Tipo de fuente del texto.

Si queremos personalizar el botón input para adaptarlo al diseño de nuestro blog, añadiremos unas líneas en el código CSS de la plantilla antes de ]]></b:skin>

#xs{
background: #27707F;
color: #fff;
padding: 1px;
margin: 0px 0px 0px 3px;
border: 2px solid #6EA7B2;
}