Tema: Problema
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/04/2012, 04:34
Cotelandia
 
Fecha de Ingreso: diciembre-2011
Ubicación: Argentina
Mensajes: 88
Antigüedad: 13 años
Puntos: 4
Pregunta Problema

Buenos días! tengo una duda, para el que tiene twitter no va a tener probleam en entenderme xD

Les cuento como funciona, al darle click al SPAN:

Código HTML:
<span class="abrir_datos">Click!</span> 
Se despliega:

Código HTML:
<div class="desplegar_info_vd">
            <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
            <p>bbbbbbbbbbbbbbbbbbbbbbb</p>
            <p><a href="#">cccccccccccccccc</a></p>
</div> 
Al darle click de nuevo se oculta. Ahí vamos bien, pero lo que quiero lograr es que al desplegar cualquiera de esos divs (uno o dos, como se ve en el ejemplo) aparezca una imagen que al cliquearla cierre todos los divs anteriormente mostrados y además que esa imagen desaparezca. Eso lo logre peeeroooo, si despliego un DIV, aparece la imagen, todo bien, peroooo al ocultar el/los DIV desplegado con el SPAN (en vez de la imagen para cerrarlos a todos) el DIV...

Código HTML:
<div id="cerrar_todo">

</div> 
...sigue viendose.

Osea lo que quiero es que al cerrar los DIVS desplegados (Cliqueando en el SPAN de cada uno) ese <div id="cerrar_todo"> desaparezca por más de que no haya sido utilizado ya que de nada va a servir porque estan todos los DIV plegados.





El DIV con class=".desplegar_info_vd" tiene un display: none;


Código HTML:
<!-- Boton para cerrar todo lo desplegado -->

<div id="cerrar_todo">

</div>

<!-- Aquí el div/section donde ira el contenido -->

<div id="contenedor">

    <div class="opciones">
        <p>HHHHHHHHHHHHH</p>
        <span class="abrir_datos">Click!</span> <!-- Al clikearlo se abrira el DIV siguiente -->		
        <div class="desplegar_info_vd">
            <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
            <p>bbbbbbbbbbbbbbbbbbbbbbb</p>
            <p><a href="#">cccccccccccccccc</a></p>
        </div>
    </div>
    <div class="opciones">

        <p>HHHHHHHHHHHHHH</p>
        <span class="abrir_datos">Click!</span> <!-- Al clikearlo se abrira el DIV siguiente -->	
        <div class="desplegar_info_vd">
            <p>aaaaaaaaaaaaaaaaaaaaaa</p>
            <p>bbbbbbbbbbbbbbbbbbbbbb</p>
            <p><a href="#">ccccccccccccccc</a></p>
        </div>
    </div>

</div> 

Código Javascript:
Ver original
  1. //cerrar todo lo desplegado
  2.     $('#cerrar_todo').hide(); //lo oculto
  3.     $('.abrir_datos').click(function(){ //si lo preciono ("click!")
  4.          $('#cerrar_todo').fadeIn();    //mostrar .cerrar_todo
  5.     });
  6.  
  7.     $('#cerrar_todo').click(function(){  //al cliquear #cerrar_todo
  8.         $('.desplegar_info_vd').slideUp(); //cierro la info desplegada
  9.         $('#cerrar_todo').fadeOut(); // y oculto el botón cliqueado
  10.     });
  11.  
  12. //hacer que  #cerrar_todo desaparezca si se plegaron todos los divs SIN utilizarlo.
  13.  
  14. ¿?

Si saben como resumir el codigo no me vendría mal que me lo hagan saber

Última edición por Cotelandia; 08/04/2012 a las 04:40