Ocultar parte de un texto en HTML

A la hora de hacer una página web, estimamos que ciertos elementos no deben ser mostrados en un primer momento, por distintas circunstancias, como pueden ser que son ampliación de información de un texto, que provocarían una carga lenta de la página (sobre todo con imágenes), que son información accesoria u otros motivos.

Para ello se puede utilizar Javascript, tal como lo indica norfiPC. Otras ideas las dan en foros del web, en TresUvesDobles, Truco95, Cristalab, ciudadblogger, Disemucho, Z Blogger. Pero hay que probar, ya que a veces no suele funcionar bien. No hay que confundirlo con la técnica de mostrar parte del texto de una entrada.

Para Blogger, sí funciona el Spoiler (así se llama el botoncito que oculta un texto), que nos muestra Trucos Blogger. Eso sí, hay que publicar la entrada para verlo funcionar.

Vamos a ver un ejemplo de ello de una manera sencilla.

Insertaremos este código HTML:

<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar Contenido';}" type="button" /><div style="display: none;">TEXTO OCULTO QUE QUIERES QUE APAREZCA AL APRETAR EL BOTÓN</div></div>

Por ejemplo, si queremos hacer una pregunta y ocultar la respuesta sería de la siguiente manera.Y cambiamos Mostrar contenido y Ocultar contenido por Ver respuesta y Ocultar respuesta.

¿Cual es la capital de Rumanía?

Inserteremos el siguente código HTML:

<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar respuesta';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver respuesta';}" type="button" /><div style="display: none;">Bucarest</div></div>

El resultado quedaría de la siguiente manera:

¿Cual es la capital de Rumanía?

Bucarest

Entradas relacionadas: Internet

También te puede interesar:

Como hacer cuestionarios y exámenes online

Crear o modificar código HTML

Caracteres especiales en HTML