como hacer un boton ocultar ( spoiler en html)

[shem]

hola amigos alguien sabe quiero hacer uno asi para mi web

[xlokyx]

ocultar que? como? cuando(evento)?

si no das mas datos no te podemos ayudar...

[shem]

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

[ssthormess]

Haz un boton que muestre un div y en el div uno que lo oculte, es eso lo que quieres?

[xlokyx]

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í

[shem]

pos la verdad nose mucho de eso por eso les pregunta ;$

[DragonX]

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

[tunait]

Vamos al foro de javascript

Tema trasladado desde Web general

[KRuN]

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

[capa]

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> 

[KRuN]

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

[capa]

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!

[tranckos]

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

[Pretencioso]

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!

[Pretencioso]

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

[dafonk]

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

[dafonk]

Iniciado por tranckos

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

[ipraetoriux]

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

[HIGHLIGHT="HTML"]

Código Javascript:

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

function MostrarOcultar (objetoVisualizar) {
if (document.all[objetoVisualizar].style.display=='none') {
document.all[objetoVisualizar].style.display='block';
} else {
document.all[objetoVisualizar].style.display='none';
}
return false;
}