Mostrar spoiler al pulsar una tabla texto

[DMKK]

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

[Sarlit]

Con el evento onclick() de javascript le puedes cambiar las propiedades al texto para que se muestre u oculte

[DMKK]

Podrias ponerme un código entero de como seria por favor?

[Sarlit]

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

[DMKK]

@Sarlit

Primero gracias pero no entiendo de códigos.

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

Es un BBCODE.

[Sarlit]

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

[mmfilesi]

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;
}

[DMKK]

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

[DMKK]

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

[Sarlit]

¡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