Javascript, Plegar y desplegar texto

Citar

Escrito el 13 Mar 2008 08:49 am

Buenas a todos.

Vereis, hice un curso de Javascript hace varios años y hay cosas que se me han olvidado...Para colmo, soy muy mala cogiendo apuntes.

Vereis, lo que buscaba hacer era que al picar sobre una frase, me despliegue un parrafo. Recuerdo que era con algo de eventos o algo asi...Para rizar el rizo, (esto no lo vi en el curso) se podría hacer, que al tener un parrafo abierto con este metodo, pulsar en una frase nueva, que esta se abra y la que ya tenía abierta, se cerrase? Gracias a todos por la ayuda de antemano.

Loti.

Por charliechin

19 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 Mar 2008 09:36 am

Las cosas aparecen con el CSS: "display:block;", y desaparecen con "display:none;" (o tb con "visibility:visible;" y "visibility:hidden;", respectivamente)

Muy rápidamente, lo que pides sería:

Código :

<style type="text/css">
.oculto{display:none;}
</style>
<script>
var visible_actual=false;
function visualiza(id)
{if(visible_actual){document.getElementById(visible_actual).style.display='none';}
 visible_actual=id;
 document.getElementById(visible_actual).style.display='block';
}
</script>
<body>
<div onclick="javascript:visualiza('div_01');">mostrar 01</div>
<div id="div_01" class="oculto">Este texto aparecerá después como "01"</div>
<div onclick="javascript:visualiza('div_02');">mostrar 02</div>
<div id="div_02" class="oculto">Este texto aparecerá después como "02"</div>
<div onclick="javascript:visualiza('div_03');">mostrar 03</div>
<div id="div_03" class="oculto">Este texto aparecerá después como "03"</div>
</body>

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 13 Mar 2008 09:48 am

POSTDATA:
Añado a lo dicho.
Hacer esto desde Javascript, en muchos casos, es un atraso, pues desde hace tiempo, que se puede hacer desde CSS exclusivamente (con su consiguiente avance de cara a la accesibilidad y rapided...)

Código :

<style>
a>span{display:none;}
a:hover>span{display:block;}
</style>
<body>
<a href="#">mostrar 01<br /><span>"01": aparece y desaparece según se pasa sobre el "enlace".<br /></span></a>
<a href="#">mostrar 02<br /><span>"02": aparece y desaparece según se pasa sobre el "enlace".<br /></span></a>
</body>

* NOTA: Y este código es Crossbrowser (para IE, Opera, FireFox...)
** NOTA: Por ahora (hasta IE7), la pseudoclase ":hover" sólo se aceptaba en IE en los "links". Pero en versiones posteriores (la nueva IE8), se espera que lo acepten en las demás etiquetas como ya hace el FireFox (con DIV, P, LI, etc...). Puedes probar cómo quedaría el ":hover" con "LI", en FireFox.
Con un pequeño añadido de javascript, tb funcionará en las versiones inferiores de IE.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 13 Mar 2008 10:38 am

Muchisisisimas gracias Rizome!! He de decir que al final medio lo conseguí por mis propios metodos

. De manera algo mas rudimentaria, pero una hace lo que puede

. De todas formas, usaré tu código.

Por charliechin

19 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Dic 2008 09:35 am

Muchas gracias por los códigos, la de "visualiza" me iba perfectamente en Blogger, pero me estoy pagando un hosting y quiero ponerle wordpress, y la funcion no funciona, y ya no se que mas puedo hacer.

¿Alguna idea?

Gracias!

Por arroba3

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 14 Oct 2010 05:34 pm

OSO use el codigo grácias, pero no logro entender como uso con el mismo div las funciones para ke desaparezca el contenido,
En pocas palablas: Como puedo lograr que con el siguiente click desaparesca el contenido que termine de abrir, si puedes ayudarme te lo agradeceria demaciado.

Por CLAnonimo

Claber