HTML - desplegar contenido de un titulo con signo +

   
Vista:

desplegar contenido de un titulo con signo +

Publicado por Paolo Santos (3 intervenciones) el 06/12/2010 08:11:12
Buen dia foreros, aqui para variar con una consulta, alguien sabe cual es el codigo HTML para que al dar click en el signo + a un titulo despliegue el contenido, por ejemplo:

+ Listado de colores
blanco
rojo
negro

si se da click al signo mas en listado de colores, despliega blanco, rojo, negro y se cambia el signo por el de - si no estoy mal, y al darle click al signo - se cierra este listado y solo deja el titulo de listado de colores, alguien me podria ayudar, gracias y saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

RE:desplegar contenido de un titulo con signo +

Publicado por ScriptShow (311 intervenciones) el 06/12/2010 16:58:02
Saludos Paolo,

un sencillo ejemplo:

<script>
function showhide(capa,sign)
{
obj=document.getElementById(capa);
obj.style.display=obj.style.display=='none'?'block':'none';
sig=document.getElementById(sign);
sig.innerHTML=sig.innerHTML=='+'?'-':'+';
}
</script>

<font face="tahoma" size="4">
[<a href="javascript:void(0)" style="text-decoration:none" id="signo1" onClick="showhide('colors1','signo1')">+</a>] Listado de colores 1:
<span id="colors1" style="display:none"><br>blanco<br>rojo<br>negro</span>

<br><br>

[<a href="javascript:void(0)" style="text-decoration:none" id="signo2" onClick="showhide('colors2','signo2')">+</a>] Listado de colores 2:
<span id="colors2" style="display:none"><br>verde<br>azul<br>gris</span>
</font>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:desplegar contenido de un titulo con signo +

Publicado por Paolo Santos (3 intervenciones) el 06/12/2010 19:06:09
no me funciono bien, no se que sera, efectivamente coloco el signo + para poder ver el contenido del titulo, pero al darle click no hace nada.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

RE:desplegar contenido de un titulo con signo +

Publicado por ScriptShow (311 intervenciones) el 06/12/2010 21:01:12
Veamos,
el script está desarrollado de acuerdo a lo que entiendo que necesitas. Está probado en IExplorer 7.0 y Firefox 3.6, funciona perfectamente.

Copia el script tal como está en una página con extensión HTML. Si tratas de hacer otra cosa, adaptarlo, etc. tienes que prestar atención a los ID de las etiquetas, nombres, etc. No cambies nada para probar.

Esto es lo que tienes que copiar en una página aparte:

<html>
<head>
<script type="text/javascript">
function showhide(capa,sign)
{
obj=document.getElementById(capa);
obj.style.display=obj.style.display=='none'?'block':'none';
sig=document.getElementById(sign);
sig.innerHTML=sig.innerHTML=='+'?'-':'+';
}
</script>
</head>
<body>
<font face="tahoma" size="4">
<hr size="1" width="200" align="left">
[<a href="javascript:void(0)" style="text-decoration:none" id="signo1" onClick="showhide('colors1','signo1')">+</a>] Listado de colores 1:
<span id="colors1" style="display:none"><br>blanco<br>rojo<br>negro</span>
<hr size="1" width="200" align="left">
[<a href="javascript:void(0)" style="text-decoration:none" id="signo2" onClick="showhide('colors2','signo2')">+</a>] Listado de colores 2:
<span id="colors2" style="display:none"><br>verde<br>azul<br>gris</span>
<hr size="1" width="200" align="left">
</font>
</body>
</html>

Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:desplegar contenido de un titulo con signo +

Publicado por Paolo Santos (3 intervenciones) el 07/12/2010 06:57:05
Gracias por el codigo ahora si funciono y era el que buscaba asi que queda solucionado, gracias por tu ayuda y saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar