lunes, 12 de agosto de 2013

Ocultar o mostrar contenidos con botones Spoiler

8/12/2013 04:25:00 p. m. Por 11 comentarios

Ocultar o mostrar contenidos Spoiler

El truco de hoy consiste en crear un botón que nos sirve para ocultar o mostrar el contenido que queramos dentro de una entrada.

Al crear una entrada para nuestro blog, es posible que queramos ocultar algún contenido para que los lectores vayan leyendo cuando pulsen un botón, ya sea para que la entrada no sea tan larga, ocultar contenidos de spoilers, o para que quede más bonito.

Aquí podéis ver dos ejemplos, ya que puede ser un botón o un texto lo que oculte o muestre el contenido:

Formato botón:

El contenido oculto puede ser cualquier cosa: texto, imágenes, videos, etc...

Formato texto:
Mostrar
El contenido oculto puede ser cualquier cosa: texto, imágenes, videos, etc...

¿Cómo poner este botón en tu web?


Para poner un botón spoiler en tu blog:

  1. Copia uno de los siguientes códigos (Botón o Texto).
  2. Pégalo donde quieras que aparezca.
  3. Sustituye el texto de color rojo por lo que quieras ocultar.

Formato botón:
<div>
  <input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" type="button" />
  <div style="display: none;">Contenido Oculto</div>
</div>

Formato texto:
<div><a href='#' onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Mostrar';}return false" type="button">Mostrar</a>
  <div style="display: none;">Contenido Oculto</div>
</div>

11 comentarios :

  1. ¿Existe alguna forma de que el codigo incluya el texto oculto, pero dentro de una tabla enmarcadp, o con un efecto que oscurezca un cuadrito al fondo?

    ResponderEliminar
    Respuestas
    1. Dentro de "Código oculto" puedes poner el código que quieras. Para enmarcarlo bastaría con poner una tabla o cualquier efecto que quieras. Un saludo

      Eliminar
  2. EXCELENTEEE!!! ME FUNCIONO!! AHORA LA DUDA ES EN VEZ DE QUE SEA UN BOTÓN NO SE PUEDE REEMPLAZAR CON UNA IMAGEN

    ResponderEliminar
    Respuestas
    1. Eso no creo que sea algo dificil, simplemente tendrias que usar HTML en el codigo que tiene el texto, y en lugar del texto, pones el codigo de la imagen.

      Eliminar
  3. Sabes como hago para llamar a un div especifico?
    estoy intentando con id="nombre" pero no me sale
    Gracias de antemano bro.

    ResponderEliminar
  4. Buenas!!, por favor, necesito saber si esto que les planteo es posible...
    Yo tengo un botón que llama una función en javscript (esta a su vez consume un webservice ). Lo que quiero es que, además de llamar esa función me muestre un botón, o sea,realice DOS cosas, 1) llama a una función "x" de un .js que está cargado desde el comienzo y 2)mostrar un nuevo botón (esto creo que no habría problema porque por lo que ví se puede mostrar tanto texto como video como cualq.cosa)
    Es posible realizar estas dos acciones luego de presionar un botón?
    Es porque es un juego y no quiero que un jugador pase a la próxima pantalla sin que hayan ingresado los dos jugadores. (el control este y aestaría resuleto)
    Muchísimas gracias por la ayuda que puedan darme!

    ResponderEliminar