Me funciona plegar desplegar un div pero quiero dos div y el segundo no me sale

[TheCarmen]

Hola a todos, vereis tengo un script que me funciona muy bien pero quiero hacer una pequeña modificacion y no me sale.

Tengo dos botones, uno para desplegar y otro para ocultar un div. el tema es que necesito tener dos div, y que los dos puedan acceder a esta funcion, pero no se diferenciarlos al principio de la funcion para decirle que lo haga solo en el que he pulsado. Aqui el codigo por si alguien me puede decir como puedo hacer esa condicion.

Código HTML:

<!-- AQUI LOS DOS BOTONES Y EL DIV (FUNCIONA PERFECT)-->


<div id="botones" style="width:600px; height:20px;">

<input type="image" id="recoger" onclick="plegar()" src="imagenes/up.gif"/>
<input type="image" id="desplegar" onclick="desplegar()" src="imagenes/down.gif" /> 

</div>


<div id="contenido" style="width:720px; height:305px; background-color:#006699; position:relative;"></div>



/* aqui el javascript*/

<script language="javascript" type="text/javascript">

var temporizadorplegar;
var temporizadordesplegar;

function plegar(){
clearTimeout(temporizadordesplegar);
var altura=parseInt(document.getElementById("contenido").style.height);

if(altura>0)
{
altura--;
document.getElementById("contenido").style.height=altura+"px";
temporizadorplegar=setTimeout("plegar()",1);
}
else
{ 
clearTimeout(temporizadorplegar);
}
}

function desplegar(){
clearTimeout(temporizadorplegar);
var altura=parseInt(document.getElementById("contenido").style.height);

if(altura<305){
altura++;
document.getElementById("contenido").style.height=altura+"px";
temporizadordesplegar=setTimeout("desplegar()",1);
}
else
{
clearTimeout(temporizadordesplegar);
}
}

</script> 

Como puedo hacer para añadir otro div con sus respectivos botones.....y que la funcion sepa discriminar???

[zalito12]

Prueba esto, debería funcionar:

Código PHP:

  <!-- AQUI LOS DOS BOTONES Y EL DIV (FUNCIONA PERFECT)-->


<div id="botones" style="width:600px; height:20px;">

<input type="image" id="recoger" onclick="plegar('contenido')" src="imagenes/up.gif"/>
<input type="image" id="desplegar" onclick="desplegar('contenido')" src="imagenes/down.gif" /> 

</div>


<div id="contenido" style="width:720px; height:305px; background-color:#006699; position:relative;"></div>


<div id="botones" style="width:600px; height:20px;">

<input type="image" id="recoger" onclick="plegar('otroDiv')" src="imagenes/up.gif"/>
<input type="image" id="desplegar" onclick="desplegar('otroDiv')" src="imagenes/down.gif" /> 

</div>

<div id="otroDiv" style="width:720px; height:305px; background-color:#006699; position:relative;"></div>



/* aqui el javascript*/

<script language="javascript" type="text/javascript">

var temporizadorplegar;
var temporizadordesplegar;

function plegar(objeto){
clearTimeout(temporizadordesplegar);
var altura=parseInt(document.getElementById(objeto).style.height);

if(altura>0)
{
altura--;
document.getElementById(objeto).style.height=altura+"px";
temporizadorplegar=setTimeout("plegar()",1);
}
else
{ 
clearTimeout(temporizadorplegar);
}
}

function desplegar(objeto){
clearTimeout(temporizadorplegar);
var altura=parseInt(document.getElementById(objeto).style.height);

if(altura<305){
altura++;
document.getElementById(objeto).style.height=altura+"px";
temporizadordesplegar=setTimeout("desplegar()",1);
}
else
{
clearTimeout(temporizadordesplegar);
}
}

</script> 
  

Eso es usar parámetros en las funciones.

[TheScript]

Hola carmen andaba buscando algo parecido a lo que estás intentando hacer, probé tu script y la verdad es que me ha venido bien ¡! jejejejejeje yo soy mas de php y tengo problemillas la verdad para aclararme con js, si consigues terminarlo ¿podrías postearlo aqui? si consigo hacer que funcione yo tb lo pondre. un saludo.

Aui te dejo el que estaba haciendo yo, pero claro, el tuyo con el timeout se queda mucho mas bonito que el mio, y aun no le apliqué el tamaño ni nada, es un tamaño fijo de un div dentro de otro que es el que se oculta y muestra.

Código HTML:

<script language="JavaScript">
function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
}
</script>

</head>

<body>

<!--Al hace llamado a la función solo tienes que idicar el nombre del DIV entre parentesis -->
<p><a href="#" onClick="muestra_oculta('contenido_a_mostrar')" title="">Mostrar / Ocultar</a></p>

<div id="contenido_a_mostrar">
<p>Este contenido tiene que mostrarse con el link</p>
</div>
<div>hola que pasa esto es una prueba a ver si se desplaza</div> 

[TheCarmen]

Hola Zalito12 y Script gracias por contestarme! jejeje probé la respuesta de Zalito12 y en la consola de errores me muestra este error:

Uncaught TypeError: Cannot read property 'style' of null

De verdad que este tema me está tocando el orgullo y la moral!!! Que inutil soy cuando quiero!!

[zalito12]

Pero has cambiado tambien esto?
<div id="botones" style="width:600px; height:20px;">

<input type="image" id="recoger" onclick="plegar('contenido')" src="imagenes/up.gif"/>
<input type="image" id="desplegar" onclick="desplegar('contenido')" src="imagenes/down.gif" />

</div>