Ocultar texto, pulsar boton y mostrarlo

julimirin · #1 (**permalink**) 13/06/2003, 09:44

A ver si alguien me pude ayudar??

Se pude hacer que cuando se cargue una pagina web solo aparezca una parte de la mima y que al pulsar un boton por debajo del mismo se cargue el texto que al principio estaba oculto.

Muchas gracias. Un saludo soys cojonudos!

Cain · #2 (**permalink**) 13/06/2003, 09:52

<span id="oculto" style="width:500;"></span>
<a href="Javascript:document.getElementById('oculto') .innerText='Y la luz se hizo';">¡Hágase la luz!</a>

JavierB · #3 (**permalink**) 13/06/2003, 10:40

Hola, julimirin.

Otra opción:

Código PHP:

  <body> 
<input type="button" value="Ver" 
 onClick="document.getElementById('oculto').style.visibility='visible'"> 
<br>Este texto se ve siempre 
<div id="oculto" style="visibility:hidden"> 
Este texto se verá cuando yo quiera 
</div> 
</body>

Saludos,

dobled · #4 (**permalink**) 13/06/2003, 14:51

y para que se vuelva a acultar???

JavierB · #5 (**permalink**) 14/06/2003, 04:01

Hola, dobled.

document.getElementById('oculto').style.visibility ='hidden'

Saludos,

julimirin · #6 (**permalink**) 15/06/2003, 09:50

Funciona que te cagas, muchas gracias. Me viende de perlas pa mi pagina.

Up the Irons!

con esto me dais la vida ya.... y para que una vez se haya ocultado al pulsar el boton, se posicione en la parte superior de la pagina. He probado con un ancla(marcador) pero no me funciona.

Gracias

alarga · #7 (**permalink**) 03/10/2005, 16:15

Hola, pues muchas gracias (aunque sea con 2 años de retraso

) porque eso era lo que iba a preguntar, aunque a mi me gustaría llegar un poco mas lejos.

Lo que me gustaría saber es como se puede hacer eso mismo pero pinchando siempre en un mismo enlace, sin utilizar dos botones. O sea, yo pincho sobre un enlace (texto o imagen) de forma que el texto de abajo ("Este texto se verá cuando yo quiera") va apareciendo y desapareciendo alternativamente.

Y el mas difícil todavia, ¿como se podría conseguir que el enlace en cuestión fuera un símbolo [-] o un símbolo [+] según estuviera el texto desplegado o no?.

(espero haberme explicado)

Muchas gracias a tod@s l@s que intenten darme una respuesta.

JavierB · #8 (**permalink**) 04/10/2005, 00:46

Hola alarga

Rizando...

Código PHP:

  <html>
<head>
<script>
function mostrar(enla) {
  obj = document.getElementById('oculto');
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
  enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
</script>
</head>
<body>
<a href="#" onclick="mostrar(this); return false" />+</a>
<div id="oculto" style="visibility:hidden">
Este texto se verá cuando yo quiera
</div>
</body> 
</html>

Saludos,

alarga · #9 (**permalink**) 04/10/2005, 07:27

Pues si, eso es justo lo que quería

Incluso me he permitido modificar la función para que pueda ser aplicada sobre la capa cuyo ID le paso como argumento, de esta manera puedo poner varios enlaces que muestran/ocultan cada uno su capa y usan la misma función.

Código:

function mostrar(enla , etik) {
  obj = document.getElementById(etik);
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
  enla.innerHTML = (enla.innerHTML == '[-]') ? '[+]' : '[-]';
}

El inconveniente es que si pongo varios enlaces consecutivos, entre uno y otro se mantiene la distancia que ocupa la capa invisible, y me pregunto si se podría conseguir que el texto, en vez de ser invisible, "desapareciera" al pinchar sobre el enlace [-], de tal forma que todo lo que hubiera en la parte inferior de la capa ocupara su lugar cuando esta "desaparece".

(o sea, que pareciese que lo que hay debajo "sube" de repente)

Un saludo y muchas gracias

JavierB · #10 (**permalink**) 04/10/2005, 09:59

Hola de nuevo.

Esto no es un rizo, solo una ligera ondulación

Pon los div así:

<div id="oculto" style="display:none">

y cambia esta línea en la función:

obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

Saludos,

alarga · #11 (**permalink**) 05/10/2005, 06:08

Bueno, bueno, bueno .... esto ha sido la repanocha, pensaba que lo último era mas complicado de conseguir que lo anterior, pero veo que no.

Muchisisimas gracias por tu ayuda

El motivo de todo esto es que me encontré este efecto en esta web y me gustó, pero al ver el código fuente de la página me eché a temblar

así que decidí buscar en este foro por si alguien sabía hacer algo parecido de una forma más simple, y mira por donde lo encontré

Un saludo y muchas gracias.

JavierB · #12 (**permalink**) 05/10/2005, 11:14

A veces las cosas complicadas resultan fáciles y viceversa. Me alegro de que te haya funcionado

nuevo · #13 (**permalink**) 08/10/2005, 18:57

va de lujo

3pies · #14 (**permalink**) 10/10/2005, 07:48

Por rizar un poco más el rizo que ya fue rizado (esto parece un galimatías)... ¿Cómo se haría eso, sin dejar el hueco vacío que queda con la capa oculta?. Es decir, si debajo de la capa oculta, tengo un texto, me queda encima de ese texto, el hueco de la capa invisible/visible. ¿Se puede plegar ese hueco para que no aparezca?. ¿De qué forma?.

Gracias miles.

gendiskan · #15 (**permalink**) 11/10/2005, 05:43

Hola.
Este post es muy interesante y útil. Pero todavía nos topamos con un problema: Microsoft y el Service Pack 2 para Windows XP.
Quien lo tenga instalado, y a la hora de cargar este código, el Internet Explorer lo bloqueará, impidiendo ver el texto oculto.
Dado que no todo el mundo sabe cambiar las opciones del navegador, y ni siquiera se les ocurre hacer clic en el mensajito que muestra ("Para ayudar a proteger su seguridad, Internet Explorer impidió que este archivo mostrara contenido activo que podría obtener acceso al equipo. Haga clic aquí para consultar más opciones...")....

¿Sabéis si existe alguna otra forma de conseguir este efecto sin que sea bloqueado? (aparte de utilizar algún otro navegador, claro) :)

JavierB · #16 (**permalink**) 11/10/2005, 06:16

Hola gendiskan Bienvenido al foro.

En otro mensaje se comentó que la barra de bloqueo solo sale si lo pruebas en tu ordenador, si lo subes a un servidor no debería darte problemas.

Saludos,

alarga · #17 (**permalink**) 11/10/2005, 07:40

Cita:

Iniciado por 3pies

Por rizar un poco más el rizo que ya fue rizado (esto parece un galimatías)... ¿Cómo se haría eso, sin dejar el hueco vacío que queda con la capa oculta?. Es decir, si debajo de la capa oculta, tengo un texto, me queda encima de ese texto, el hueco de la capa invisible/visible. ¿Se puede plegar ese hueco para que no aparezca?. ¿De qué forma?.

Gracias miles.

No puedo ayudarte porque tampoco tengo muchos conocimientos, pero si lo explicaras un pelín mejor quizás podría darte alguna idea.

gendiskan · #18 (**permalink**) 11/10/2005, 16:14

Cita:

Iniciado por JavierB

Hola gendiskan Bienvenido al foro.

En otro mensaje se comentó que la barra de bloqueo solo sale si lo pruebas en tu ordenador, si lo subes a un servidor no debería darte problemas.

Saludos,

Gracias por la aclaración, lo he comprobado y tienes razón. Perdonad que no me haya dado cuenta de que ya había un mensaje aclarándolo.

Enric Roca · #19 (**permalink**) 22/10/2005, 11:52

Fantastico, lo que buscaba para mi web, pero una duda, yo necesito varios links y no me funciona, me atasco aqui (mi conocimiento de javascript es nulo)

Cita:

Iniciado por alarga

Incluso me he permitido modificar la función para que pueda ser aplicada sobre la capa cuyo ID le paso como argumento, de esta manera puedo poner varios enlaces que muestran/ocultan cada uno su capa y usan la misma función.

Como le doy un ID distinto a cada link y div para que sepa que texto mostrar/ocultar? por que antes en la funcion si salia la palabra "oculto" pero ahora sale "etik" y ya me he perdido.

PD. Te agradeceria con un ejemplo tambien, no solo teoria.

Enric Roca · #20 (**permalink**) 23/10/2005, 10:31

Lo unico que he conseguido es hacer esto

Código PHP:

  <script> 
function mostrar(enla) { 
  obj = document.getElementById('oculto'); 
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden'; 
} 
function mostrar2(enla) { 
  obj = document.getElementById('oculto2'); 
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden'; 
} 
</script> 
 
</head> 
<body> 
 
<a href="#" onclick="mostrar(this); return false" />+</a> 
<div id="oculto" style="visibility:hidden"> 
Este texto se verá cuando yo quiera 
</div> 
 
<a href="#" onclick="mostrar2(this); return false" />+</a> 
<div id="oculto2" style="visibility:hidden"> 
Este texto se verá cuando yo quiera 
</div> 
 
</body>  
</html>

pero claro, uso una cabecera con el <head> para todas las paginas (php), y alguna tendra 1 ID para desplegar y otras 15 posibles para desplegar, y lo que yo quisiera es si se puede tener una unica funcion independientemente de que necesites llamarla 1 o 20 veces condiferentes id y diferentes links. Si no me queda la posibilidad de poner 20 funciones como lo que he echo para tener reserva, pero es peso innecesario para la pagina.

alarga · #21 (**permalink**) 24/10/2005, 16:00

Hola Enric, te pongo un ejemplo práctico de como se puede compartir una misma función para varios enlaces.

Código PHP:

  <html> 
<head> 
 
<script> 
function mostrar(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; 
  enla.innerHTML = (enla.innerHTML == '[-]') ? '[+]' : '[-]'; 
} 
</script> 
 
</head> 
 
<body> 
 
<p><a href="#" onclick="mostrar(this,'oculto'); return false" />[+]</a></p> 
 
<div id="oculto" style="display:none"> 
Este texto se verá cuando yo quiera 
</div> 
 
<div>esto es un texto intermedio, siempre esta visible</div> 
 
<p><a href="#" onclick="mostrar(this,'oculto2'); return false" />[+]</a></p> 
 
<div id="oculto2" style="display:none"> 
Este texto se verá cuando yo quiera 
</div> 
 
<div>esto es otro texto intermedio, siempre esta visible</div> 
 
</body> 
</html>

Espero que ahora lo hayas pillado

Un saludo

Enric Roca · #22 (**permalink**) 24/10/2005, 23:52

Muchisimas gracias, ya lo tengo implementado, y he aprendido algo.

Me volvi loco haciendo pruebas, pero nunca se me ocurrio " mostrar(this,'oculto2'); ", ya que como dije antes en javascript mi conocimiento es nulo, pero aprendere.

Cap.Buscapina · #23 (**permalink**) 25/10/2005, 08:03

tambien puede ser así:

Cita:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function mostrar(enla) {
obj = document.getElementById('oculto'+enla);
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>

</head>
<body>

<a href="#" onclick="mostrar('1'); return false" />+</a>
<div id="oculto1" style="visibility:hidden">
Este texto se verá cuando yo quiera
</div>

<a href="#" onclick="mostrar('2'); return false" />+</a>
<div id="oculto2" style="visibility:hidden">
Este texto se verá cuando yo quiera
</div>

</body>
</html>

saludos

alarga · #24 (**permalink**) 19/02/2006, 06:52

Vuelvo a resucitar este post (

) porque me ha surgido una nueva duda.

Lo que me gustaría conseguir ahora es lo mismo que pregunté en mi primer mensaje del post, pero sin tener que pinchar en el enlace, simplemente pasando el ratón por encima de él. De tal forma que el texto o la capa oculta solo se haga visible durante el tiempo que el cursor del ratón esté encima del enlace.

He intentado cambiar la función js y la etiqueta del enlace (he probado con onmouseover, onmouseup, onmousemove, ...) pero sin resultados positivos.

¿Alguna ayudita?, gracias

JavierB · #25 (**permalink**) 19/02/2006, 06:56

Hola alarga

Tienes que cambiar un poco el enlace:

<a href="#" onmouseover="mostrar('1','visible')" onmouseout="mostrar('1','hidden')" />+</a>

y la función:

Código:

function mostrar(enla,vis) {
obj = document.getElementById('oculto'+enla);
obj.style.visibility = vis
}

Saludos,

alarga · #26 (**permalink**) 19/02/2006, 07:32

Pues hola de nuevo y muchas gracias, aunque no me ha funcionado, y lo peor es que tampoco he pillado la esencia del código que has puesto.

De todas formas pensaba responderme para decir que lo había conseguido resolver de esta manera:

Código HTML:

<script type="text/javascript">

function mostrar(enla,etik) {
  obj = document.getElementById(etik);
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}

</script>
..............................
<body>

<a href="#" onmouseover="mostrar(this,'capa'); return false" onmouseout="mostrar(this,'capa'); return false">enlace</a>

<div id="capa" style="visibility:hidden">
    Este texto se verá cuando ponga el cursor sobre el enlace
</div>

</body>

Peeero hay un problema, resulta todo esto viene a cuento porque quiero hacer un menú vertical, donde al pasar el ratón por ciertas opciones aparezca otro submenú al lado del menú principal (pegado a esté, pero sin superponerse), y eso es lo que acabo de conseguir.

Lo malo es que cuando muevo horizontalmente el cursor del ratón desde el menú principal al submenú, éste último desaparece siéndome imposible moverme por sus opciones.

¿Hay alguna solución para esto?

alarga · #27 (**permalink**) 19/02/2006, 12:27

Cita:

Iniciado por alarga

¿Hay alguna solución para esto?

Pues si, y ya la he encontré

Me he puesto a cavilar y por fin he dado con la solución, ya tengo mi menú terminado. La solución consiste en crear dos funciones genéricas, una para mostrar capas y otras para ocultarlas, y en utilizar los eventos onMouseOver y onMouseOut.

Saludos.

PD: que de cosas se aprenden cuando se tiene que buscar uno mismo la vida

WinderJerter · #28 (**permalink**) 23/05/2010, 17:48

Cita:

Iniciado por JavierB

Hola alarga

Rizando...

Código PHP:

  <html> 
<head> 
<script> 
function mostrar(enla) { 
  obj = document.getElementById('oculto'); 
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden'; 
  enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-'; 
} 
</script> 
</head> 
<body> 
<a href="#" onclick="mostrar(this); return false" />+</a> 
<div id="oculto" style="visibility:hidden"> 
Este texto se verá cuando yo quiera 
</div> 
</body>  
</html>

Saludos,

hola que tal JavierB, primero antes que nada pido disculpas por revivir este tema, mi pregunta es la siguente: como le tengo que hacer para que envez de + o - sean imagenes y que se compatible con IE y Opera.

Saludos y muchas gracias de antemano

y nuevamente disculpen por revivir el tema

_cronos · #29 (**permalink**) 24/05/2010, 07:25

Donde pone + y - tendrías que poner el código de la imagen: <img src='mostrar.gif' width='...' height='...'.../> y <img src='ocultar.gif' width='...' height='...' .../>

Saludos (:

PD: Para la próxima vez, es mejor que abras un nuevo tema y pongas un enlace a este en el mismo.

WinderJerter · #30 (**permalink**) 24/05/2010, 13:06

Hola que tal; mira este el el codigo como le he montado

Código Javascript:

Ver original<html>
<head>
 
<style>
#hide {
    background:url(images/hide.png);
    height:19px;
    text-decoration:none;
    width:19px;
}
 
#show {
    background:url(images/show.png);
    height:19px;
    text-decoration:none;
    width:19px;
}
</style>
 
<script>
function mostrar(enla) {
  obj = document.getElementById('oculto');
  obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
  enla.innerHTML = (enla.innerHTML == '<div id="hide"></div>') ? '<div id="show"></div>' : '<div id="hide"></div>';
}
</script>
</head>
 
<body>
 
<a href="#" onClick="mostrar(this); return false" /><div id="show"></div></a>
<div id="oculto" style="display:none">Texto oculto</div>
 
</body> 
</html>

Y aqui la pagina del ejemplo http://psy-tribe.co.cc/demo.php, el script funciona bien en Firefox y Chrome, pero el problema esta en IE y opera, cuando abro la pagina y le doy click a la imagen se cambia bien el boton pero descuel de que lo quiero ocultar el texto le doy al boton pero no se cambia el boton pero si se oculta el texto

Esto como lo puedo solucionar???

Saludos y gracias de antemano