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