expandir varios div dinámicos

[pabrigarcia]

Hola ,tengo un script que me muestra los usuarios de una base de datos la idea es que al pulsar en el usuario expanda el telefono y lo contraiga al pulsar sobre el boton al pulsar otro usuario.
El problema que tengo es que si tengo uno va bien pero cuando hay mas de uno al ser dinámico no se decirle que expanda o contraiga ese....

Dentro de un while saco los usuarios con sus teléfonos:

Código PHP:

  <div><a id="mostrar-'.$idusuario.'">'.$nombre.'</a></div>
                                  

<div id="caja-'.$idusuario.'">
'.$telefonouser.'

</div> 
   

y el ajax que hace que solo me funcione uno

Código PHP:

  <script type="text/javascript">
$(function()
{

$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});

$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
});
</script> 
  

Agradecería como hacer para que fuera dinámico creo que es con algo de this pero no se como,porque también quiero tener sólo uno desplegado , no pueden existir dos desplegados a la vez.

Gracias

[perryjr]

Código Javascript:

var abierto; // la declaramos como global
 
$(function()
{
 
$("#mostrar").click(function(event) {
  event.preventDefault();
 
  // seguramente haya maneras de hacerlo mejor, pero eso te lo dejo a ti
  // tenemos un problema y es que slideTooggle() usa 1/2 segundillos para la
  // animación y la ejecución sigue su paso. Si ponemos este código después de slideToogle()
  // el comportamiento seria imprevisible dependiendo solo de la velocidad del cliente.
  if($('#caja').css('display') == 'none') // ahora invisible, se hará visible
    abierto = $('#caja');
  else // ahora abierto, se hará invisible
   abierto = null;
 
  $("#caja").slideToggle();
});
 
$("#caja a").click(function(event) {
  event.preventDefault();
  $("#caja").slideUp();
  abierto = null;
});
 
});
 

Si no entiendes algo no dude en preguntarme

[pabrigarcia]

No había visto la respuesta, muchas gracias voy a probar a ver si funciona....

[pabrigarcia]

No funciona tampoco me pasa lo mismo que en mi ejemplo , al tener todos la misma id solo funciona con el primero....

[perryjr]

Si tienes varias cajas y quieres seleccionarlas todas a la vez me parece que es una buena idea seleccionarlas por clases. La clase "mostrar" y "caja" a lo mejor pueden estar asociadas a estilos CSS o no, pero sirven para que JavaScript reconozca todos los elementos.

Código PHP:

// esta variable guardará la caja abierta para poder cerrarla si abrimos otra
var abierto;
 
$(function()
{
 
// selecciona todos los elementos con la clase "mostrar"
$(".mostrar").click(function(event) {
  event.preventDefault();
 
  var id = $(this).attr('id');
  id = id.split('-')[1]; // cogemos el identificador desde el atributo id
 
  // seguramente haya maneras de hacerlo mejor, pero eso te lo dejo a ti
  // tenemos un problema y es que slideTooggle() usa 1/2 segundillos para la
  // animación y la ejecución sigue su paso. Si ponemos este código después de slideToogle()
  // el comportamiento seria imprevisible dependiendo solo de la velocidad del cliente.
  if($('#caja-' + id).css('display') == 'none') // ahora invisible, se hará visible
    abierto = $('#caja-' + id);
  else // ahora abierto, se hará invisible
   abierto = null;
 
  $("#caja-" + id).slideToggle();
});
 
$(".caja a").click(function(event) {
  event.preventDefault();
  $(this).parent().slideUp();
  abierto = null;
});
 
});
 
 
 
<div><a id="mostrar-'.$idusuario.'" class="mostrar">'.$nombre.'</a></div>
<div id="caja-'.$idusuario.'" class="caja">
'.$telefonouser.'
 
</div>
 

De nuevo, aquí me tienes si el código no te funciona =D

[fidel_mar]

prueba metiendo la funcion de javascript con el identificador del usuario dentro de tu iteracion que te muestra los usurios

dentro de tu ciclo

$("#mostrar"+id_usuario).click(function(event) {
event.preventDefault();
$("#caja"+id_usuario).slideToggle();
});
$("#caja"++id_usuario).click(function(event) {
event.preventDefault();
$("#caja"+id_usuario).slideUp();
});

[perryjr]

Iniciado por fidel_mar

prueba metiendo la funcion de javascript con el identificador del usuario dentro de tu iteracion que te muestra los usurios

dentro de tu ciclo

$("#mostrar"+id_usuario).click(function(event) {
event.preventDefault();
$("#caja"+id_usuario).slideToggle();
});
$("#caja"++id_usuario).click(function(event) {
event.preventDefault();
$("#caja"+id_usuario).slideUp();
});

Eso ya lo había pensado, pero imagina que tiene 20 filas en la tabla. ¿No sería un poco ineficiente tener 20 funciones diferentes que hacen EXACTAMENTE lo mismo? Si lo metes en cada iteración eso es lo que va a ocurrir, puedes verlo en el código final.

Es mejor seleccionarlas por la clase o por parentesco(es decir, los hijos div de tal td, etc.) pero esto último me parecía menos adaptable al diseño que tenga en su página que no corresponde con el código simplificado que ha puesto aquí, aunque ambas soluciones son válidas =D.