Foros del Web » Programando para Internet » Javascript »

Mostrar spoiler al pulsar una tabla texto

Estas en el tema de Mostrar spoiler al pulsar una tabla texto en el foro de Javascript en Foros del Web. Hola querría saber como hacer este tipo de spoiler : Al hacer click en la zona blanca se muestra el texto y si le das ...
  #1 (permalink)  
Antiguo 07/01/2015, 21:42
 
Fecha de Ingreso: enero-2015
Ubicación: Malaga
Mensajes: 5
Antigüedad: 9 años, 11 meses
Puntos: 0
Mostrar spoiler al pulsar una tabla texto

Hola querría saber como hacer este tipo de spoiler :



Al hacer click en la zona blanca se muestra el texto y si le das click de nuevo se oculta.

Gracias
  #2 (permalink)  
Antiguo 08/01/2015, 05:19
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 10 años
Puntos: 9
Respuesta: Mostrar spoiler al pulsar una tabla texto

Con el evento onclick() de javascript le puedes cambiar las propiedades al texto para que se muestre u oculte
  #3 (permalink)  
Antiguo 08/01/2015, 08:20
 
Fecha de Ingreso: enero-2015
Ubicación: Malaga
Mensajes: 5
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Mostrar spoiler al pulsar una tabla texto

Podrias ponerme un código entero de como seria por favor?
  #4 (permalink)  
Antiguo 08/01/2015, 08:59
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 10 años
Puntos: 9
Respuesta: Mostrar spoiler al pulsar una tabla texto

Tengo un ejemplo parecido, el mio muestra/oculta un div entero de la web, pero modificarlo para que solo sea el texto de un cuadro debería resultarte fácil:

En javascript:
Código:
function updateMenu(identificacion) {
    var menu = document.getElementById(identificacion);
    if (menu.className == 'visible') {
        menu.className = 'invisible';
    } else {
        menu.className = 'visible';
    }
}
En CSS:
Código:
.invisible
{
	display:none;
}.visible
{
	display:block;
}
En este caso le paso el id de lo que quiero ocultar con una función onClick que pongo en ciertos elementos de mi html y a correr. Lo único malo es que tienes que ponerles id a todos los spoilers...
  #5 (permalink)  
Antiguo 08/01/2015, 09:37
 
Fecha de Ingreso: enero-2015
Ubicación: Malaga
Mensajes: 5
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Mostrar spoiler al pulsar una tabla texto

@Sarlit

Primero gracias pero no entiendo de códigos.

Si pongo el último me saldrá como en la foto?

Es un BBCODE.
  #6 (permalink)  
Antiguo 09/01/2015, 01:56
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 10 años
Puntos: 9
Respuesta: Mostrar spoiler al pulsar una tabla texto

No exactamente, ese código te ocultará el cuadro del spoiler entero, no solo el texto, para conseguir ese efecto en html tendrías que hacer dos divs, darle a uno la forma del cuadro y meter otro sin formato dentro del cuadro con el texto.

Si no tienes claro como hacerlo, no lo hagas, ese código te hará un efecto muy similar solo que ocultándote también el cuadro que me imagino no será necesario cuándo no quieras mostrar nada.

Saludos
  #7 (permalink)  
Antiguo 09/01/2015, 11:34
 
Fecha de Ingreso: noviembre-2010
Mensajes: 36
Antigüedad: 14 años, 1 mes
Puntos: 1
Respuesta: Mostrar spoiler al pulsar una tabla texto

Con jQuery es fácil

html

Código:
<div class="spoilers">
<h4 class="tituloSpoiler">Título del spoiler</h4>
<div class="desarrolloSpoiler">Desarrollo del spoiler</div>
</div>
js

Código:
$('.tituloSpoiler').click(function() {
 $(this).next(".desarrolloSpoiler").slideToggle();
});
css

Código:
.desarrolloSpoiler {
display: none;
}
  #8 (permalink)  
Antiguo 09/01/2015, 17:40
 
Fecha de Ingreso: enero-2015
Ubicación: Malaga
Mensajes: 5
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Mostrar spoiler al pulsar una tabla texto

Pero no entiendo ... pongo solo eso y el codigo no sale...

Es un BBCODE y si pongo eso no sale :S

Podríais ponerlo entero?

Que al pulsar saliera el texto de blanco a negro al darle click
  #9 (permalink)  
Antiguo 13/01/2015, 06:14
 
Fecha de Ingreso: enero-2015
Ubicación: Malaga
Mensajes: 5
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Mostrar spoiler al pulsar una tabla texto

Dejo la solución :

Replace :

Código:
<div style="padding-left: 10px">
	<b>Spoiler: </b><span style="color: #A0A0A0">[ pulsa para ver ]</span>
	<div style="border-radius: 6px 0px 0px 6px; border: 1px inset black; margin-right: 40%; margin-top: 5px" >
		<div style="cursor: pointer" title="Click to Reveal Contents" onclick="if (this.firstElementChild.style.visibility == 'hidden'){this.firstElementChild.style.visibility = 'visible'; this.title='Click to Hide Contents'} else {this.firstElementChild.style.visibility = 'hidden'; this.title='Click to Reveal Contents'}">
			<div style="visibility: hidden; padding: 5px">
				{param}
			</div>
		</div>
	</div>
</div>
Listo :D
  #10 (permalink)  
Antiguo 13/01/2015, 06:31
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 10 años
Puntos: 9
Respuesta: Mostrar spoiler al pulsar una tabla texto

¡Muy bien! Me alegro de que consiguieras solucionarlo aunque yo cambiaría también la altura cuándo no muestras el contenido, algo así:

Código HTML:
<div style="padding-left: 10px">
	<b>Spoiler: </b><span style="color: #A0A0A0">[ pulsa para ver ]</span>
	<div style="border-radius: 6px 0px 0px 6px; border: 1px inset black; margin-right: 40%; margin-top: 5px">
		<div style="cursor: pointer" title="Click to Reveal Contents" onclick="if (this.firstElementChild.style.visibility == 'hidden'){this.firstElementChild.style.visibility = 'visible'; this.firstElementChild.style.height='auto'; this.title='Click to Hide Contents'} else {this.firstElementChild.style.visibility = 'hidden'; this.firstElementChild.style.height='20px'; this.title='Click to Reveal Contents'}">
			<div style="visibility: hidden; padding: 5px; height: 20px;">
				Texto en cuestión lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur voluptate velit esse cillum dolore eu lorem ipsum dolor sit amet consectetur voluptate velit esse cillum dolore eu lorem ipsum dolor sit amet consectetur voluptate velit esse cillum dolore eu lorem ipsum dolor sit amet consectetur voluptate velit esse cillum dolore eu lorem ipsum dolor sit amet consectetur voluptate velit esse cillum dolore eu 
			</div>
		</div>
	</div>
</div> 
Es igual pero reduciendo el espacio del div cuándo no estés mostrando nada.

Un saludo

Etiquetas: css, pulsar, spoiler, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:05.