1

Cuando doy click en estos divs se ocultan, Quiero lograr que cuando un usuario oculte todos los divs se active un div con un mensaje, pero solo cuando acabe de ocultarlos todos.

<div class='open'>Ocultar 1</div>
<div class='open'>Ocultar 2</div>
<div class='open'>Ocultar 3</div>
<div class='open'>Ocultar 4</div>
<div class='open'>Ocultar 5</div>

/* DIV A MOSTRAR */
<div class='oculto'>-CONTENIDO MENSAJE-</div>

<script>
    $(document).ready(function(){
        $(".open").click(function(){
            $(this).hide();
        });
    });
</script>

1 respuesta 1

4

$(document).ready(function(){
    $(".open").click(function(){
        $(this).hide();
        if (!comprobar_visibles('.open')) {
            $('.oculto').show();
        }
    });
});

function comprobar_visibles(elemento) {
    if ($(elemento).is(':visible')) {
        return true
    }
    else {
        return false;
    }
}
.oculto {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='open'>Ocultar 1</div>
<div class='open'>Ocultar 2</div>
<div class='open'>Ocultar 3</div>
<div class='open'>Ocultar 4</div>
<div class='open'>Ocultar 5</div>

/* DIV A MOSTRAR */
<div class='oculto'>-CONTENIDO MENSAJE-</div>

He creado un método que mediante la función is() comprueba si existe algún elemento de la clase .open visible. Si existe alguno devuelve true si no existe devuelve false. Al hacer un click en cada uno de los elementos a ocultar compruebo que si tras ocultarse ese siguen existiendo elementos visibles. De no haberlos es cuando muestro el <div> con la clase .oculto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.