Problema

[Cotelandia]

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:

//cerrar todo lo desplegado
    $('#cerrar_todo').hide(); //lo oculto
    $('.abrir_datos').click(function(){ //si lo preciono ("click!")
         $('#cerrar_todo').fadeIn();    //mostrar .cerrar_todo
    });
 
    $('#cerrar_todo').click(function(){  //al cliquear #cerrar_todo
        $('.desplegar_info_vd').slideUp(); //cierro la info desplegada
        $('#cerrar_todo').fadeOut(); // y oculto el botón cliqueado
    });
 
//hacer que  #cerrar_todo desaparezca si se plegaron todos los divs SIN utilizarlo.
 
¿?
 

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

[elarrieux]

Hola!

Aca te hice una solucion:

http://jsfiddle.net/bG8w9/27/

Ojala te sirva.

Sds.

[Cotelandia]

Iniciado por elarrieux

http://jsfiddle.net/bG8w9/27/

Gracias por responder, pero la verdad no entiendo mucho que hace ese código.

[elarrieux]

Ahi te actualice un poco mas el ejemplo a ver si queda claro:

http://jsfiddle.net/bG8w9/33/

Si clickeas en cualquier linea, se va a ocultar esa linea.

Si clickeas en "ocultar las lineas..", te va a ocultar todas las lineas que estan dentro del mismo contenedor.

Si clickeas en la ultima linea visible, te va a ocultar el "ocultar las lineas.."

Esta bien ese comportamiento? era lo que querias?

El script es sencillo, lo que hace es ocultar la linea y fijarse si es la ultima linea visible dentro del contenedor. Si lo es, entonces oculta todo.

Si no te queda claro, avisame y le ponemos mas datos reales a ver si lo entendes mejor asi.

Sds.

[Cotelandia]

Me parece que me entendiste mal, o yo te entendi mal xD

Lo que quiero es (siguiendo tu código) que:

- haya un boton que este fuera de los divs y oculto.

- Los bloques azul y rojo tienen las "lineas" ocultas.

- Al hacer click en cualqueriera de los DIVs ".cerrarTodo" se tienen que desplegar las lineas del DIV ".contenedorLineas" siguiente (no de todos los ".contenedorLineas" del documento sino del que le sigue) y además se tiene que mostrar el boton.

- En caso de que se presionen nuevamente los DIVs ".cerrarTodo" se tienen que ocultar las lineas correspondientes.

- Y en caso de que se hayan cerrado todas las lineas cliqueando el DIV ".cerrarTodo", recien ahí ocultar el botón por más de que no haya sido usado para nada.

Quiero que ese botón trabaje como lo hace el de twitter. Al cerrar por otros medios los tweets este desaparece.



Gracias por la ayuda ^^