Cambiar IMG al dar click (al mostrar/ocultar DIV)

[Greco2]

Hola, antes que todo quiero avisar que no se casi nada de javascript, actualmente estoy usando un código que encontre en una web que me permite mostrar y ocultar una capa.

tengo distintos "cuadros" hechos con capas, son unos cuadros desplegables que me muestran un titlulo y al costado un signo "+" para poder desplegar el contenido de dicho cuadro, para realizar esa tarea utilizo el siguiente código que obtube de internet:

Código HTML:

 <script type="text/Javascript">
	function expandcollapse (postid){
		whichpost = document.getElementById(postid);
			if (whichpost.className=="postshown") {
			whichpost.className="posthidden";
		}else{
			whichpost.className="postshown";
		}
	}
</script> 

En la hoja de estilo (CSS) tengo lo siguiente:

Código HTML:

.posthidden {display:none}
.postshown {display:inline}

Y en el cuerpo de la página lo siguiente:

Código HTML:

<div id="caja1">
	<a href="javascript:expandcollapse('1')">[+]</a>Titulo
	<span class="posthidden" id="1"><br />aqui el contenido que se muestra y oculta<br />bla bla bla...</span>
</div> 

Lo que deseo es que al expandirse la caja el [+] cambie por [-], no se si se entiende mi consulta, resulta que con el enlace [+] desplego la caja y deseo que cuando la caja esté expandida el enlace cambie a [-].

Como podía hacer eso??, encontre en el foro un codigo que me permite hacer algo parecido peor me gustaría saber si modificando solo un poco el código que tengo podría obtener lo que deseo.

Espero cualquier ayuda.

Atte,

Greco R.

[TurKa]

Hola:

Tendrías que modificar 2 cosas:

1) El body
Debes indicar una ID única al símbolo [+] para poder modificarlo luego en el script. Reemplazas entonces el [+] por lo siguiente:

Código:

<span id="simbolo">[+]</span>

2) El script
Simplemente debes indicar que cuando esté desplegado muestre [-] y sino [+]. El script te quedará así:

Código:

<script type="text/Javascript">
	function expandcollapse (postid){
		whichpost = document.getElementById(postid);
			if (whichpost.className=="postshown") {
			whichpost.className="posthidden";
			document.getElementById('simbolo').innerHTML = "[+]";
		}else{
			whichpost.className="postshown";
			document.getElementById('simbolo').innerHTML = "[-]";
		}
	}
</script>

Lo que está en negritas son las dos líneas que debes agregar al script.

Suerte!

[chalchis]

Iniciado por Greco2

Hola, antes que todo quiero avisar que no se casi nada de javascript, actualmente estoy usando un código que encontre en una web que me permite mostrar y ocultar una capa.

tengo distintos "cuadros" hechos con capas, son unos cuadros desplegables que me muestran un titlulo y al costado un signo "+" para poder desplegar el contenido de dicho cuadro, para realizar esa tarea utilizo el siguiente código que obtube de internet:

Código HTML:

 <script type="text/Javascript">
	function expandcollapse (postid){
		whichpost = document.getElementById(postid);
			if (whichpost.className=="postshown") {
			whichpost.className="posthidden";
		}else{
			whichpost.className="postshown";
		}
	}
</script> 

En la hoja de estilo (CSS) tengo lo siguiente:

Código HTML:

.posthidden {display:none}
.postshown {display:inline}

Y en el cuerpo de la página lo siguiente:

Código HTML:

<div id="caja1">
	<a href="javascript:expandcollapse('1')">[+]</a>Titulo
	<span class="posthidden" id="1"><br />aqui el contenido que se muestra y oculta<br />bla bla bla...</span>
</div> 

Lo que deseo es que al expandirse la caja el [+] cambie por [-], no se si se entiende mi consulta, resulta que con el enlace [+] desplego la caja y deseo que cuando la caja esté expandida el enlace cambie a [-].

Como podía hacer eso??, encontre en el foro un codigo que me permite hacer algo parecido peor me gustaría saber si modificando solo un poco el código que tengo podría obtener lo que deseo.

Espero cualquier ayuda.

Atte,

Greco R.

esto te puede servir
http://www.forosdelweb.com/f13/bloqu...ambien-324515/

saludos