Foros del Web » Programación web » Javascript »

como hacer un boton ocultar ( spoiler en html)

Estas en el tema de como hacer un boton ocultar ( spoiler en html) en el foro de Javascript en Foros del Web. hola amigos alguien sabe quiero hacer uno asi para mi web...
  #1 (permalink)  
Antiguo 31/10/2007, 11:42
 
Fecha de Ingreso: octubre-2007
Mensajes: 39
Antigüedad: 6 años, 9 meses
Puntos: 0
como hacer un boton ocultar ( spoiler en html)

hola amigos alguien sabe quiero hacer uno asi para mi web
  #2 (permalink)  
Antiguo 31/10/2007, 17:23
 
Fecha de Ingreso: octubre-2007
Mensajes: 87
Antigüedad: 6 años, 9 meses
Puntos: 1
Re: como hacer un boton ocultar ( spoiler en html)

ocultar que? como? cuando(evento)?

si no das mas datos no te podemos ayudar...
  #3 (permalink)  
Antiguo 01/11/2007, 15:26
 
Fecha de Ingreso: octubre-2007
Mensajes: 39
Antigüedad: 6 años, 9 meses
Puntos: 0
Re: como hacer un boton ocultar ( spoiler en html)

bueno quiero un boton que diga diga "mostrar" y al darle click se muestre una imagen info imframe lo que sea y cuando esta mostrando algo el boton cambie a ocultar para cuando kiera ocultar la informacion
  #4 (permalink)  
Antiguo 01/11/2007, 17:20
 
Fecha de Ingreso: agosto-2007
Ubicación: Maracaibo, Venezuela
Mensajes: 417
Antigüedad: 6 años, 11 meses
Puntos: 10
Re: como hacer un boton ocultar ( spoiler en html)

Haz un boton que muestre un div y en el div uno que lo oculte, es eso lo que quieres?
  #5 (permalink)  
Antiguo 02/11/2007, 01:28
 
Fecha de Ingreso: octubre-2007
Mensajes: 87
Antigüedad: 6 años, 9 meses
Puntos: 1
Re: como hacer un boton ocultar ( spoiler en html)

exacto, esa es la mejor opción para lo que quieres, javascript para mostrar/ocultar un div, y como ya he dicho un par de veces, dreamweaver te lo pone fácil ;)

si aun con dreamweaver no sabes... pregunta por aquí
  #6 (permalink)  
Antiguo 02/11/2007, 12:47
 
Fecha de Ingreso: octubre-2007
Mensajes: 39
Antigüedad: 6 años, 9 meses
Puntos: 0
Re: como hacer un boton ocultar ( spoiler en html)

pos la verdad nose mucho de eso por eso les pregunta ;$
  #7 (permalink)  
Antiguo 02/11/2007, 14:03
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.333
Antigüedad: 12 años, 1 mes
Puntos: 152
Re: como hacer un boton ocultar ( spoiler en html)

Código HTML

Código HTML:
<div id="ver_on1"><h1 id="titu"><a href="#" onclick="mostrar1('bloque1')" title="Expandir info">Expandir</a></h1>
<p class="copete">Haga click en el t&iacute;tulo para axpandir la informaci&oacute;n</p>
</div>
<div id="ver_off1" style="display: none"><h1><a href="#" onclick="ocultar1('bloque1')" title="Cerrar info">Contraer</a></h1>
</div>
<div id="bloque1" style="display: none">
<p id="txt">Texto oculto que ahora se ve :)</p>
</div> 
Código Javascript:

Código HTML:
//Ocultar/Mostrar Div's
OCULTO="none";
VISIBLE="block";
  function mostrar1(blo) {
    document.getElementById(blo).style.display=VISIBLE;
    document.getElementById('ver_off1').style.display=VISIBLE;
    document.getElementById('ver_on1').style.display=OCULTO;
    }
  function ocultar1(blo) {
    document.getElementById(blo).style.display=OCULTO;
    document.getElementById('ver_off1').style.display=OCULTO;
    document.getElementById('ver_on1').style.display=VISIBLE;
    }
Espero te sirva
  #8 (permalink)  
Antiguo 03/11/2007, 03:48
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.853
Antigüedad: 12 años, 10 meses
Puntos: 366
Re: como hacer un boton ocultar ( spoiler en html)

Vamos al foro de javascript

Tema trasladado desde Web general
  #9 (permalink)  
Antiguo 29/05/2008, 17:24
 
Fecha de Ingreso: mayo-2008
Mensajes: 3
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: como hacer un boton ocultar ( spoiler en html)

disculpen que abra este tema denuevo, pero es que tengo la misma duda, y no entendí bien los códigos de arriba.. el que dice Código HTML lo pegué en una página pero no me funcionó entonces no sé que hacer.. hay que poner algo antes en dentro de la etiqueta HEAD??
alguien podría ayudarme??

gracias
saludos
  #10 (permalink)  
Antiguo 29/05/2008, 17:35
Avatar de capa  
Fecha de Ingreso: octubre-2006
Mensajes: 86
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: como hacer un boton ocultar ( spoiler en html)

estoy con time, bueno solo es copy add paste
dentro de body vale eh!
Código HTML:
<script type="text/javascript">
//Ocultar/Mostrar Div's
OCULTO="none";
VISIBLE="block";
  function mostrar1(blo) {
    document.getElementById(blo).style.display=VISIBLE;
    document.getElementById('ver_off1').style.display=VISIBLE;
    document.getElementById('ver_on1').style.display=OCULTO;
    }
  function ocultar1(blo) {
    document.getElementById(blo).style.display=OCULTO;
    document.getElementById('ver_off1').style.display=OCULTO;
    document.getElementById('ver_on1').style.display=VISIBLE;
    }
</script>

<div id="ver_on1"><h1 id="titu"><a href="#" onclick="mostrar1('bloque1')" title="Expandir info">Expandir</a></h1>
<p class="copete">Haga click en el t&iacute;tulo para axpandir la informaci&oacute;n</p>
</div>
<div id="ver_off1" style="display: none"><h1><a href="#" onclick="ocultar1('bloque1')" title="Cerrar info">Contraer</a></h1>
</div>
<div id="bloque1" style="display: none">
<p id="txt">Texto oculto que ahora se ve :)</p>
</div> 
__________________
Destreza..<?phs La felicidad es un trayecto ?>
  #11 (permalink)  
Antiguo 29/05/2008, 17:50
 
Fecha de Ingreso: mayo-2008
Mensajes: 3
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: como hacer un boton ocultar ( spoiler en html)

ohh vale muchas gracias... ahí si que me funciona..
otra preguntita.. ya lo cambié pero por qué sale de ese porte ese texto si en ninguna parte vi que dijera que tenía que salir así de grande??
el "Expandir" y "Contraer"

gracias y saludos
  #12 (permalink)  
Antiguo 29/05/2008, 18:21
Avatar de capa  
Fecha de Ingreso: octubre-2006
Mensajes: 86
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: como hacer un boton ocultar ( spoiler en html)

Lo que usted busca creo que es este:
Código HTML:
<script type="text/javascript">
function capa(op){
document.getElementById('Capa').style.display = (op==1)?'block':'none';
}
</script>
<a href="#" onclick="capa(1)">mostrar</a> <a href="#" onclick="capa(0)">ocultar</a>
<div id="Capa" style="border:solid #6699FF 1px;background:#FFFFE6; width:300px;">
<strong>Contenido de la CAPA!</strong><br />
todo los contenidos 
</div> 
Los que nos permite esconder o mostrar, es el estilo o style, que le damos los valores de 'block' (ver) y 'none' (ocultar) en display.

saludos!
__________________
Destreza..<?phs La felicidad es un trayecto ?>
  #13 (permalink)  
Antiguo 10/07/2009, 16:49
 
Fecha de Ingreso: agosto-2008
Mensajes: 60
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: como hacer un boton ocultar ( spoiler en html)

Un saludo

He practicado con los ejemplos que mencionan y si son funcionales, pero cuando el boton de ocultar/mostrar se pone muy a bajo dentro del contenido, al pulsar el boton este muestra el contenido pero tambien te lleva al top de la pagina.

Alguien sabe que modificasion hay que hacer para que al pulsar el boton la pagina se quede en la posicion en que esta en lugar de enviar al top?.
  #14 (permalink)  
Antiguo 07/08/2009, 19:15
 
Fecha de Ingreso: marzo-2009
Mensajes: 6
Antigüedad: 5 años, 4 meses
Puntos: 1
Respuesta: como hacer un boton ocultar ( spoiler en html)

Probé el código que colocaron y me funcionó bien, pero sólo pude utilizarlo una sola vez en la página, porque si lo vuelvo a colocar, me oculta/muestra sólo el primero

¿Alguien podría ayudarme para poder incluir en más de una parte secciones de "mostrar/ocultar" sin que se oculte exclusivamente la primera?

¡Gracias de antemano!
  #15 (permalink)  
Antiguo 11/08/2009, 12:00
 
Fecha de Ingreso: marzo-2009
Mensajes: 6
Antigüedad: 5 años, 4 meses
Puntos: 1
Respuesta: como hacer un boton ocultar ( spoiler en html)

¡Ya encontré la solución a mi problema. Lo comparto por si alguien más llega a necesitarlo.

En head:

<SCRIPT language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.all[objetoVisualizar].style.display=='none') {
document.all[objetoVisualizar].style.display='block';
} else {
document.all[objetoVisualizar].style.display='none';
}
}
</SCRIPT>

En body:

<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><SPAN onMouseOver="this.style.color='99CCFF';this.style. cursor='hand'" onMouseOut="this.style.color='FFFFFF';this.style.t extDecoration='none'" onClick="JavaScript:MostrarOcultar('mostrar1');">P rimer texto (haz click para mostrar)</SPAN></td>
</tr>
<tr id=mostrar1 style="display:none">
<td align="left" valign="top">Texto oculto 1</td>
</tr>
<tr>
<td align="left" valign="top"><SPAN onMouseOver="this.style.color='99CCFF';this.style. cursor='hand'" onMouseOut="this.style.color='FFFFFF';this.style.t extDecoration='none'" onClick="JavaScript:MostrarOcultar('mostrar2');">S egundo texto (haz click para mostrar)</SPAN></td>
</tr>
<tr id=mostrar2 style="display:none">
<td align="left" valign="top">Texto oculto 2</td>
</tr>
</table>

Espero también les sirva. Saludos.
  #16 (permalink)  
Antiguo 12/04/2013, 12:21
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 1 año, 3 meses
Puntos: 0
Respuesta: como hacer un boton ocultar ( spoiler en html)

Ya se que este hilo es mas viejo que la pantera rosa pero...
Justamente estoy trabajando para realizar un spoiler como el que indican acá y tengo el mismo problema que dice "tranckos".

Alguien tiene una respuesta como se puede hacer para que la página se quede donde está y no salte al top?

Gracias por cualquier ayuda
  #17 (permalink)  
Antiguo 12/04/2013, 12:25
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 1 año, 3 meses
Puntos: 0
Respuesta: como hacer un boton ocultar ( spoiler en html)

Cita:
Iniciado por tranckos Ver Mensaje
Un saludo

He practicado con los ejemplos que mencionan y si son funcionales, pero cuando el boton de ocultar/mostrar se pone muy a bajo dentro del contenido, al pulsar el boton este muestra el contenido pero tambien te lleva al top de la pagina.

Alguien sabe que modificasion hay que hacer para que al pulsar el boton la pagina se quede en la posicion en que esta en lugar de enviar al top?.
Encontraste la forma de solucionarlo?
Tengo el mismo problema
  #18 (permalink)  
Antiguo 12/04/2013, 21:22
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 921
Antigüedad: 4 años, 3 meses
Puntos: 129
Respuesta: como hacer un boton ocultar ( spoiler en html)

...pues muy facil...aca agregas return en el evento onclick

[HIGHLIGHT="HTML"]
Código Javascript:
Ver original
  1. <SPAN onMouseOver="this.style.color='99CCFF';this.style. cursor='hand'" onMouseOut="this.style.color='FFFFFF';this.style.t extDecoration='none'" onClick="return MostrarOcultar('mostrar2');">


...luego en la funcion agregas return false

Código JAVASCRIPT:
Ver original
  1. function MostrarOcultar (objetoVisualizar) {
  2. if (document.all[objetoVisualizar].style.display=='none') {
  3. document.all[objetoVisualizar].style.display='block';
  4. } else {
  5. document.all[objetoVisualizar].style.display='none';
  6. }
  7. return false;
  8. }
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.
Tema Cerrado

SíEste tema le ha gustado a 3 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 04:37.
SEO by vBSEO 3.3.2