Acordeón que expanda un div y contraiga otro

[la_nutria]

Hola.
Tengo un acordeón que toma los registros de una base de datos MySQL. Cada vez que doy click en un registro del mismo se expande un div (debajo de cada registro) que amplía la información. El problema es que no he logrado que al hacer click sobre otro registro se habra el div correspondiente y se contraiga el que estaba abierto antes, de modo que se pueda ver sólo un div expandido.
Este es la función JavaScript que tengo hasta el momento:

Código Javascript:

var req;
function buscar(valor, num) {
     if(window.XMLHttpRequest) {
        req = new XMLHttpRequest();
     }
     else if(window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
     }
    var contenido = document.getElementById('contenido-'+num);
              if (contenido.style.display == 'none')
        {
        contenido.style.display = 'block';
        } else {
        contenido.style.display = 'none';
        }
    var url = "procesa.php?valor="+valor;
     req.open("Get", url, true);
     req.onreadystatechange = function() {
         if(req.readyState == 1) {
            contenido.innerHTML = 'espere ...';
         }
         if(req.readyState == 4 && req.status == 200) {
            var respuesta = req.responseText;
            contenido.innerHTML = respuesta;
         }
     }
     req.send(null);
 }
 

Muchas gracias por su ayuda.

[Reedyseth]

Mira puedes ponerle la misma clase a los div y con javascript creas una funcion en el evento onClick que hara lo siguiente:

Cuando le des click y se vaya al evento onclick llama una funcion que se encargue de ocultar todos los elementos con la clase que asignaste, digamos 'acordeon', y ahi mismo vuelves a mostrar el div que ocultaste anteriormente, seria algo asi:

Código Javascript:

function ocultarDivs() {
   var elements = document.getElementsByClassName("acordeon");
   elements.style.display = "none";
   this.style.display = "block";
}
 

En este caso

Código:

this

hace referencia al objeto/funcion ocultarDivs, que a su vez fue invocado por un div especifico que tenia el evento 'onClick'.

[la_nutria]

Muy amable Reedyseth por responderme.
Ahora que tengo esa nueva función "ocultarDivs" mi nueva interrogante es si debo llamarla con el mismo evento onclick que llama a la función "buscar". Además, debo cambiar algo en la función "buscar" para que funcione "ocultarDivs"?
Este es el código PHP donde se invoca la función:

Código PHP:

 while ($reg = mysql_fetch_array($res)) {
$num = 1;
echo "<tr>\n";
echo "   <td>$num</td>
          <td>$reg[origen]</td>
          <td>$reg[h]</td>
          <td>\n";
$valor=$reg['linea'];
?>
    <a href='' onClick='buscar(<?php echo "$valor";?>,<?php echo "$num";?>);return false;'>Ver más...</a>
<?php
echo "    </td>\n";
echo "</tr>\n";
echo "<tr>
        <td colspan='4'>
           <div class='acordeon' id='contenido-$num' style='display: none'>
           </div>
        </td>
     </tr>\n";
$num++;   

Es una tabla con registros que muestra rutas de viaje, todo se genera dinámicamente. De acuerdo al registro cliqueado por el usuario se despliega el div 'contenido-$num' ampliando la info de ese registro.
Gracias de nuevo y perdón por ser tan rompepelotas.

[ocp001a]

este comportamiento lo hace el accordion de jquery ui, quizá te conviniera echarle una mirada

[Reedyseth]

Ok mira, como veo que estas usando el XMLHttpRequest seguramente no quieres usar jQuery, o utilizarias el acordeon de jQuery UI, por tal razon te hice un codigo en puro javascript que se encarga de hacer funcionar el acordeon con una estructura como la siguiente:

Código HTML:

<div class="accordeon" onclick="ocultarDivs(this);">
	<h1 >Header 1</h1>			
	<p>Texto 1</p>
</div> 

Puedes darte una clavada en el codigo javascript para que veas como funciona, disculpa que haya puesto la funcion anteriormente, pero es una funcion para que te diera la idea, pero la idea ya realizada segun la estructura html que hice salto este javascript

Código Javascript:

function ocultarDivs(e) {
                console.info("OK");
                var elements = document.getElementsByClassName("accordeon");
                for (var i=0; i < elements.length; i++) {
                    var pNode = elements[i].getElementsByTagName("p"); 
                    pNode[0].style.display = "none";
                };
                var toShow = e.getElementsByTagName("p");
                toShow[0].style.display = "block";
            }
 

Para que veas como funciona el codigo te dejo una muestra en vivo:

http://fiddle.jshell.net/7u5TZ/

me has dado una buena idea para hacer un post en mi blog y no olvides de calificar las respuestas

[la_nutria]

Gracias de nuevo por la ayuda.
Debo llamar ambas funciones en el mismo evento onclick? Yo lo hice así:

Código HTML:

<div id='contenido-<?php echo $num;?>' class='accordeon' onclick='ocultarDivs(this);buscar(<?php echo "$valor";?>,<?php echo "$num";?>);'> 

Y en la función buscar eliminé la condición if. Pero ahora, la primera vez que cliqueo un registro se muestra la etiqueta <p> con la info ampliada pero desaparece el registro donde cliqueé. Y al cliquear en otro registro ya no se muestra más la info correspondiente.
En el Firebug el error que muestra es:

TypeError: pNode[0] is undefined
[Parar en este error]
pNode[0].style.display = "none";

[la_nutria]

Al final lo solucioné con JQuery.
Saludos

[Reedyseth]

Que bueno que ya te salio, al final tenias que caer en las redes de jQuery jajaja, saludos.