Mostrar u ocultar DIVs

pep0te · #1 (**permalink**) 31/01/2011, 06:43

Hola,

Os cuento el problema. He buscando cómo mostrar u ocultar al hacer click en un texto o algo similar y lo he encontrado, un poco cutre, pero ahí está. La cosa es que quiero utilizar esto para ocultar unas notas y solo poder leerlas si se hace click en "Mostrar". El tema es que las notas están en una tabla que genero accediendo a la base de datos. Hago la select y me muestra todo completamente, también la opción de "Mostrar divs", pero solo me funciona en la primera fila (si le doy click me muestra la información que está oculta). Pero si hago click en la 2ª, 3ª, 4ª..., unicamente me despliega la 1ª, da igual en la que clickee. No sé si se me entiende... Adjunto una imagen para que veáis más o menos lo que pasa:

El código de JS es:

Código:

<script>
function mostrardiv() {
	div = document.getElementById('flotante');
	div.style.display = "";
}
function cerrar() {
    div = document.getElementById('flotante');
    div.style.display='none';
}
</script>

y la parte en la que lo llamo:

Código PHP:

                           echo '<td> 
                             <div id="mostrarDiv"><a href="javascript:mostrardiv();">Mostrar Div</a></div> 
                             <div id="flotante" style="display:none;"> '.$usuario['notas'].' <br><a href="javascript:cerrar();">Cerrar</a></div> 
                        </td>';

Supongo que será problema con el ID o algo así. A ver si sabéis decirme qué puede ser o si existe una manera distinta de hacer lo que digo.

Gracias y un saludo.

IsaBelM · #2 (**permalink**) 31/01/2011, 06:55

el primer problema que se aprecia es que estás duplicando las id's tantas veces como celdas tienes la tabla. como estás obteniendo las notas de una bd no te será difícil asignarle un valor numérico a cada div

Cita:

<div id="mostrarDiv1"><a href="javascript:mostrardiv('flotante1');">Mostrar Div</a></div>
<div id="flotante1" style="display:none;"> '.$usuario['notas'].' <br><a href="javascript:cerrar('flotante1');">Cerrar</a></div>

WeSoRz · #3 (**permalink**) 31/01/2011, 07:06

Las IDs son únicas para los elementos de una web, y en el código que pones estás sobreescribiéndolas una y otra vez, por lo que únicamente te funciona con la primera fila.

Para solucionarlo se me ocurre algo sencillo reutilizando el código que tienes:

Código:

<script>
function mostrardiv(num) {
	div = document.getElementById('flotante'+num);
	div.style.display = "";
}
function cerrar(num) {
    div = document.getElementById('flotante'+num);
    div.style.display='none';
}
</script>

Código PHP:

  $i = 1; // Contador
                         echo '<td>
                             <div id="mostrarDiv"><a href="javascript:mostrardiv(' . $i . ');">Mostrar Div</a></div>
                             <div id="flotante' . $i . '" style="display:none;"> '.$usuario['notas'].' <br><a href="javascript:cerrar(' . $i . ');">Cerrar</a></div>
                        </td>';
$i++;

Prueba y nos cuentas :)

pep0te · #4 (**permalink**) 31/01/2011, 07:22

Hola otra vez, gracias a los dos por contestar.

Cita:

Iniciado por IsaBelM

el primer problema que se aprecia es que estás duplicando las id's tantas veces como celdas tienes la tabla. como estás obteniendo las notas de una bd no te será difícil asignarle un valor numérico a cada div

Esto lo supuse pero no sé cómo hacerlo.

También pensé en lo que dice WeSoRz (es más o menos lo que decías tú, IsaBelM), pero lo pruebo y no me funciona. Tenía buena pinta por el tema del contador y tal pero parece que no. Se os ocurre algo más?

Gracias!!!

WeSoRz · #5 (**permalink**) 31/01/2011, 07:26

Qué no funciona en concreto? Te genera el html con el número? O no te funciona la función JS?

El "no me funciona" puede ser demasiado amplio como para encontrar el problema jeje porque a priori, te debería funcionar.

Por cierto, pregunta absurda... el php que quoteo doy por hecho que está contenido en un bucle, de ahí lo del $i++, no?

IsaBelM · #6 (**permalink**) 31/01/2011, 07:54

Cita:

Iniciado por WeSoRz

Las IDs son únicas para los elementos de una web, y en el código que pones estás sobreescribiéndolas una y otra vez, por lo que únicamente te funciona con la primera fila.

Cita:

<div id="mostrarDiv"><a href="javascript:mostrardiv(' . $i . ');">Mostrar Div</a></div>
<div id="flotante' . $i . '"

te falta usar el contador en esta id

pep0te · #7 (**permalink**) 31/01/2011, 07:58

Pues he copiado y pegado el texto tal y como lo has puesto ahí y al hacer click en la primera fila se despliega y al darle al cerrar cierra, al igual que antes. Hasta ahí bien. Pero al hacer click en las demás, se sigue desplegando únicamente la primera. Está dentro de un while. Esto es una parte del código:

Código PHP:

  while ($usuario = mysql_fetch_assoc($subastasactivas)) {
                    echo '<td>'.$usuario['nomsubasta'].'</td>
                         <td>'.$usuario['proveedor'].'</td>
                         <td>'.$usuario['id_usuario'].'</td>
                         <td>'.$usuario['id_empresa'].'</td>
                         <td>'.$usuario['f_creac'].'</td>
                         <td>'.$usuario['f_cierre'].'</td>
                         <td>'.$usuario['hora_cierre'].'</td>';                 
                         if ($usuario['progreso'] == 0) {
                             echo'<td>En proceso...</td>';
                         }elseif ($usuario['progreso'] == 1){
                             echo'<td>Activa</td>';                         
                         }
                          $i = 1; // Contador
                             echo '<td>
                                 <div id="mostrarDiv"><a href="javascript:mostrardiv('.$i.');">Mostrar Div</a></div>
                                 <div id="flotante'.$i.'" style="display:none;"> '.$usuario['notas'].' <br><a href="javascript:cerrar('.$i.');">Cerrar</a></div>
                            </td>';
                        $i++;  
                    echo '</tr>'; 
                }

¿Algo está mal?

pep0te · #8 (**permalink**) 31/01/2011, 08:00

Cita:

Iniciado por IsaBelM

te falta usar el contador en esta id

He probado:

Código PHP:

  <div id="mostrarDiv'.$i.'">

Pero hace lo mismo que antes.

IsaBelM · #9 (**permalink**) 31/01/2011, 08:16

ese comentario no era para ti

Cita:

<div id="mostrarDiv'.$i.'"><a href="javascript:mostrardiv('flotante'.$i.');">Mostrar Div</a></div>
<div id="flotante'.$i.'" style="display:none;"> '.$usuario['notas'].' <br><a href="javascript:cerrar('flotante'.$i.');">Cerrar</a></div>

haz estos cambios. revisa la sintaxis por que no se si está bien

pep0te · #10 (**permalink**) 31/01/2011, 08:23

Ahora hago click y no se despliega xD. He cambiado la comilla ' de "javascript:mostrardiv('flotante'.$i.');" por " porque si no me da error. Qué rarito es esto...

IsaBelM · #11 (**permalink**) 31/01/2011, 08:41

has modificado el js?? ahora estás enviando un valor

pep0te · #12 (**permalink**) 31/01/2011, 08:46

Sí sí, he copiado y pegado el js de arriba

WeSoRz · #13 (**permalink**) 31/01/2011, 09:15

Cita:

Iniciado por IsaBelM

te falta usar el contador en esta id

No sería necesario, pese a que no sería validado por W3C por repetir IDs. Las que se muestran y ocultan son los "flotante".

Es posible que sea cuestión de tipos en el JS que al sumar cadena con número no funcione, asi que el número mejor lo ponemos como cadena (con comillas).
Prueba lo siguiente:

Código PHP:

Ver original$i = 1; // Contador
                         echo '<td>
                             <div id="mostrarDiv"><a href="javascript:mostrardiv(\'' . $i . '\');">Mostrar Div</a></div>
                             <div id="flotante' . $i . '" style="display:none;"> '.$usuario['notas'].' <br><a href="javascript:cerrar(\'' . $i . '\');">Cerrar</a></div>
                        </td>';
$i++;

Si sigue sin funcionarte, péganos por favor el html que te genera ese bucle.

IsaBelM · #14 (**permalink**) 31/01/2011, 14:25

Cita:

Iniciado por pep0te

Sí sí, he copiado y pegado el js de arriba

has de copiarlo y modificarlo

Cita:

Iniciado por WeSoRz

No sería necesario, pese a que no sería validado por W3C por repetir IDs. Las que se muestran y ocultan son los "flotante".

aunque tienes razón, es conveniente hacerlo para un futuro

pep0te · #15 (**permalink**) 31/01/2011, 18:40

Sigue sin funcionar...la leche. Tendrá que ver algo que yo llame al fichero .php desde otro (hago un include)? Os pongo el código del fichero que incluyo:

Código PHP:

  <?php
            $activeaucs= mysql_query("SELECT nomsubasta,proveedor,id_usuario,id_empresa,DATE_FORMAT(f_creac,'%d/%m/%Y - %H:%i:%s') AS f_creac,DATE_FORMAT(f_cierre,'%d/%m/%Y') AS f_cierre,progreso,hora_cierre,notas FROM subastas where progreso=1 or progreso=0");
           //$subastasactivas = mysql_query("SELECT * FROM subastas where progreso=1 or progreso=0");       
           $numero = mysql_num_rows($activeaucs);
           if ($numero != 0) {
                echo '<table border=0 cellspacing="1" cellpadding="2">
                    <tr>
                     <th>T&iacute;tulo</th>
                     <th>Proveedor</th>
                     <th>ID de usuario</th>
                     <th>ID de empresa</th>
                     <th>Fecha y hora de apertura</th>
                     <th>Fecha de cierre</th>
                     <th>Hora de cierre</th>                 
                     <th>Estado</th>
                     <th>Notas</th>
                    </tr><tr>';
                while ($usuario = mysql_fetch_assoc($activeaucs)) {
                    echo '<td>'.$usuario['nomsubasta'].'</td>
                         <td>'.$usuario['proveedor'].'</td>
                         <td>'.$usuario['id_usuario'].'</td>
                         <td>'.$usuario['id_empresa'].'</td>
                         <td>'.$usuario['f_creac'].'</td>
                         <td>'.$usuario['f_cierre'].'</td>
                         <td>'.$usuario['hora_cierre'].'</td>';                 
                         if ($usuario['progreso'] == 0) {
                             echo'<td>En proceso...</td>';
                         }elseif ($usuario['progreso'] == 1){
                             echo'<td>Activa</td>';                         
                         }

                              $i = 1; // Contador
                               echo '<td>
                                  <div id="mostrarDiv"><a href="javascript:mostrardiv(\'' . $i . '\');">Mostrar Div</a></div>
                                  <div id="flotante' . $i . '" style="display:none;"> '.$usuario['notas'].' <br><a href="javascript:cerrar(\'' . $i . '\');">Cerrar</a></div>
                             </td>';
                              $i++;
                    echo '</tr>'; 
                }
                echo '</table>';
            }
?>

¡Me tiene loco!

WeSoRz · #16 (**permalink**) 01/02/2011, 01:17

Viendo todo el código, el problema está claro jeje

El contador tienes que inicializarlo fuera del bucle, es decir, saca del while el "$i = 1;" o de lo contrario siempre tendrá el valor 1 ;)

Prueba y nos dices!

pep0te · #17 (**permalink**) 01/02/2011, 03:26

Joer macho, qué fallo más tonto. Es cierto, simplemente era eso. Anda que no darme cuenta... Y cómo se haría para que al clickear en otro, si hay alguno abierto, mantenga el último clickeado y cierre el anterior? Con un if en el js no? Es que js sé -10 entonces me es muy complicado utilizarlo...

Muchas gracias

WeSoRz · #18 (**permalink**) 01/02/2011, 03:50

Si quieres un efecto acordeón te recomiendo que utilices jQuery: http://docs.jquery.com/UI/Accordion

pep0te · #19 (**permalink**) 01/02/2011, 03:59

Puff lo he estado leyendo pero a mí eso me supera. Ni entiendo esto:

Código PHP:

    <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });

pep0te · #20 (**permalink**) 01/02/2011, 04:05

No sé cómo llamar a la función en la zona del código que hemos estado toqueteando hasta conseguir que desplegara xD

WeSoRz · #21 (**permalink**) 01/02/2011, 04:23

Qué no entiendes de esa parte? "#accordion" es el div contenedor, y .accordion(); es la función que te lo hace todo. Por defecto se activa cuando haces click en los elementos "a" contenidos en "#accordion".

El ejemplo que te ponen es muy sencillo, por lo que se puede adaptar a tu necesidad sin problema alguno. Simplemente tienes que llamar a las librerías JS, añadir <script></script> y adaptar tu código al formato que utilizan:

Código HTML:

Ver original<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
      Texto 1
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        Texto 2
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        Texto 3
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        Texto 4
    </div>
</div>

La primera y última líneas van fuera del bucle, los otros tres elementos son los que tienes que generar en cada iteración del while, por lo que cada una tendría que llevar algo así:

Código PHP:

Ver originalecho '  <h3><a href="#">Section 1</a></h3>
    <div>
      '.$usuario['notas'].'
    </div>';

El problema que le veo es que utilizando tablas te dará problemas porque no puedes meterlo todo en el div.

De todos modos, si ves que eso no te sirve, utilizando también jQuery se podría hacer un efecto similar al del acordeón, pero más "adaptable".

pep0te · #22 (**permalink**) 01/02/2011, 05:07

Pero, ¿dónde incluyo esto?:

Código PHP:

    <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });  
  </script>

Supongo que tendré que poner al principio del fichero esto:

Código PHP:

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });  
  </script>

Y cómo aplico eso a mi fichero? No entiendo lo de "La primera y última líneas van fuera del bucle". Es que me parece extrañísimo este código. Los otros son entendibles pero esto...xDDD

con jQuery te refieres a esto?:

Código PHP:

  jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});

Menuda locura...

Bueno, también comento que al final he conseguido hacer que con un único click muestre u oculte las notas en la tabla, pero solo eso, sin ocultar una al desplegar otra. He utilizado esto:

Código PHP:

  Pongo estos scripts:

<script languaje="JavaScript">
function muestra_oculta(id){
    if (document.getElementById){
        var el = document.getElementById(id);
        el.style.display = (el.style.display == 'none') ? 'block' : 'none';
    }
}
window.onload = function(){/
    muestra_oculta('contenido_a_mostrar');
}
</script>


Declaro $i=1 fuera del while, y después:

echo '<td>';
          echo '<a onclick=muestra_oculta("contenido_a_mostrar'.$i.'") title="">Mostrar/Ocultar</a>';
          echo '<div style="display:none;" id="contenido_a_mostrar'.$i.'">';
          echo '<p>'.$usuario['notas'].'</p>';
          echo '</div>';
echo '</td>';
$i++;

Es algo simple pero bueno, me gustaría conseguir el accordion este...

Estoy perdido en javascript, no sé si podrías aconsejarme algún tuto de inicio...

¡Muchas gracias!

WeSoRz · #23 (**permalink**) 01/02/2011, 05:23

La nueva función que has puesto es simplemente juntar el mostrar y ocultar en una única función.

Viendo que lo del acordeón quizá te sobra, te recomiendo hacer lo siguiente (trataré de ir paso a paso).

1) En el head agrega ésta linea:

Código HTML:

Ver original<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

2) A continuación agrega éste código (en el head o en el body):

Código HTML:

Ver original<script language="javascript" type="text/javascript">
    $(document).ready(function()
    {
        $("a.muestra").click(function()
      {
            var active = $(this).attr("href");
            $(active).slideToggle("slow");
            return false;
        });
    });
  </script>

3) Cada iteración del bucle tiene que ser de la siguiente forma (aunque puedes adaptarlo a tu gusto):

Código PHP:

Ver originalecho '<td>';
          echo '<a class="muestra" href="#m'.$i.'">Mostrar/Ocultar</a>';
          echo '<div id="m'.$i.'" style="display: none;">';
          echo '<p>'.$usuario['notas'].'</p>';
          echo '</div>';
echo '</td>';
$i++;

Eso debería funcionarte sin problemas a no ser que se me haya pasado alguna comilla o similar (lo estoy poniendo sobre la marcha xD). Si falla y no encuentras el problema, pégame el html que te genera.

Un saludo ;)

pep0te · #24 (**permalink**) 01/02/2011, 05:31

Voy a intentar entenderlo xD. Ahora edito.

Edit:

Impresionante, menuda locura. No entiendo muy bien el script, es muy chungo porque no tengo mucho concepto sobre ello. Tengo conceptos en PHP, Visual Basic, C, shell scripts,... pero de javascript nada, ni de java tampoco. Pero esto quién narices lo hace? La leche macho...eres un crack. Consigo mostrar las notas con el efectillo este chulo, muchas gracias por todo.

Me aconsejas algún tuto en especial para formarme, al menos, mínimamente? Es que tanto javascript como java son lenguajes muy extensos (no sé si muy complicados) y no sabría por dónde empezar...

Un saludo y muchas gracias de nuevo.

pep0te · #25 (**permalink**) 01/02/2011, 06:12

¡¡Editado!!

WeSoRz · #26 (**permalink**) 01/02/2011, 06:32

Me alegra que te funcione :)

Cuando lo aprendas verás que no es tan complejo, simplemente es echarle imaginación.

Lo que he utilizado es jQuery, que es una librería de JavaScript (que por cierto, te recomiendo que te bajes y la pongas en local como cualquier otro fichero JS) y que facilita eternamente todo éste tipo de "filigranas".

Manuales no te podría recomendar ninguno, ya que personalmente nunca los he seguido (gracias a google). Lo mejor es leer y leer, y tratar de entender éstos códigos que a priori te parecen imposibles, pero que te aseguro que son muy simples. Aprender de los que ya saben es la mejor forma de avanzar :)

pep0te · #27 (**permalink**) 01/02/2011, 06:46

Hay que echarle un ratillo de imaginación, eso seguro xD.

Bueno, pues habrá que ponerse con el tema que al fin y al cabo para hacer una página bonita y alegre hay que aprender JS :D

Muchas gracias por toda tu ayuda. Espero que a alguien le sirva este post ya que está todo muy explicado.

Un saludo!!!