Agregar y quitar cosas (display)

razer · #1 (**permalink**) 05/04/2008, 22:17

Un nuevo problema :P

Tengo estas dos funciones en javascript:

Código:

	function showhide1(divid){
	thediv = document.getElementById(divid);
	if(thediv.style.display== 'none' ){
	thediv.style.display='block'
	}else{
	}
	}
	
	
	function showhide2(divid){
	thediv = document.getElementById(divid);
	if(thediv.style.display== 'none' ){
	}else{
	thediv.style.display='none'
	}
	}

showhide1 agrega (inputs, selecs, lo que sea que esté dentro del div), y showhide2 saca eso que agregó.

El tema es que lo que quiero es que showhide1 cada vez que lo aprete agrege (actualmente lo apretas y agrega y lo vuelves a apretar y no da mas bola). Y que showhide2 sirva para quitar todos los agregados (lo apretas una vez y saca 1, lo apretas otra y saca otro, etc).

Para gente que sabe javascript no creo que sea tan jodido, alguien me podria decir como es? no me den pistas, porque no me sirve. no se nada de javascript, es un simple script que necesito implementar.

gracias.

caricatos · #2 (**permalink**) 06/04/2008, 01:39

Hola:

Para lo que quieres la programación es bastante más compleja, ya que los estilos deberías aplicárselos, por ejemplo, podrías tener un array con los elementos que quieres que se muestren/oculten y un índice de "por donde estamos":

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<style>
#c1, #c2, #c3, #c4 {
 display: none;
}
</style>
<script>
var indice = 0;
var capas = ["c1", "c2", "c3", "c4"];
function tag(id) {return document.getElementById(id)};
function mostrar() {
tag(capas[indice++]).style.display = "block";
tag("ampliar").disabled = indice == (capas.length)
tag("encoger").disabled = false;
}
function ocultar() {
tag(capas[--indice]).style.display = "none";
tag("ampliar").disabled = false
tag("encoger").disabled = (indice == 0);
}
</script>
</head>
<body>
<button type="button" id="ampliar" onclick="mostrar()">mostrar</button>
<button type="button" id="encoger" onclick="ocultar()" disabled >ocultar</button>
<div id="c1" >
<p>elemento 1</p>
</div>
<div id="c2" >
<p>elemento 2</p>
</div>
<div id="c3" >
<p>elemento 3</p>
</div>
<div id="c4" >
<p>elemento 4</p>
</div>

</body>
</html>

Saludos

razer · #3 (**permalink**) 06/04/2008, 10:23

Muy bueno caricatos, muchas gracias por la ayuda y disculpe las molestias!
:D