Ayuda con ests Codigo de Spoiler

N

nxovoix

Gamma

Redactor

• 21 May 2014

• #1

Hola amigos BETAS... veran tengo este codigo:

Insertar CODE, HTML o PHP:

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

y todo bien... funciona a la perfeccion....

Pero quiero hacer que al darle click en Mostrar el boton baje con todo lo que se muestra y al darle Ocultar regrese al mismo lugar.. es posible esto?


Algo asi:

BOTON QUE OCULTA TODO:

EL BOTON MUESTRA CONTENIDO OCULTO:

PERO LO QUE QUIERO ES QUE EL BOTON BAJE CON EL CONTENIDO OCULTO:

Y AL VOLVER A DARLE EN OCULTAR REGRESE:

Desde ya gracias a todos 😀

 

A

arevaloemiliano

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 21 May 2014

• #2

Prueba asi

<div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div>

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div>

 

N

nxovoix

Gamma

Redactor

• 21 May 2014

• #3

arevaloemiliano dijo:

Prueba asi

<div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div>

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div>

Hacer clic para expandir...

Gracias por responder... pero nada.. el boton se muestra.. pero al darle click el contenido oculto no sale.. :topsy_turvy:

---------- Post agregado el 21-may-2014 hora: 21:44 ----------

@kanikase .... podrias? por favor... 🙁

 

A

Atun

Dseda

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

Verificado por Binance

• 22 May 2014

• #4

voy a revisarlo ami igual me interesaba algo asi 🙂

 

OLMID

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 25 May 2014

• #5

Hola nxovoix

Con ese código no he podido hacerlo, pero te muestro otra forma de conseguirlo usando jquery

VER EJEMPLO

Cualquier cosa,... avisa

Un saludo 🙂

 

N

nullPointer

Beta

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 25 May 2014

• #6

Buenas,

Si no estás familiarizado con librerías como JQuery, puedes probar esta solución:
Online Javascript Editor

Ahora bien, desde mi punto de vista la solución de OLMID es la más correcta ya que con JQuery consigues un código más limpio y con menos lineas de código (no tienes que reinventar la rueda).

Un saludo.

😉

 

kanikase

Préstamo

Ómicron

Programador

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

• 25 May 2014

• #7

nxovoix dijo:

Gracias por responder... pero nada.. el boton se muestra.. pero al darle click el contenido oculto no sale.. :topsy_turvy:

---------- Post agregado el 21-may-2014 hora: 21:44 ----------

@kanikase .... podrias? por favor... 🙁

Hacer clic para expandir...

:distant: apenas veo que me uisiste mencionar 😛7:
Si te falla solo vulevelo a poner, a mi me pasaba eso, el spoiler se edita solo si lo usas en las entradas de blogger :encouragement: