entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Ocultar y mostrar divs con jQuery

Oculto y muestro un par de divs con un checkbox, si lo marco muestra los divs y si lo desmarco los oculta, en la página de estilos por defecto tengo los divs con visibility: hidden; el problema lo tengo cuando se entra en la página, si el checkbox tiene el checked por defecto, el checkbox aparece marcado, pero el div queda escondido por defecto, según la hoja de estilos. y si a la hoja de estilos le cambio la propiedad a visible y el checkbox esta desmarcado por defecto, pero muestra igualmente los divs, he probado a quitar también de la hoja de estilos esta propiedad, pero continua igual, pongo el código:

jQuery

$(document).ready(function() {  
    function ocultarymostrarfecha()
    {
            if($("input#check").not(':checked')) {                  
            $("div#div1").css({"visibility": "hidden"});
            $("div#div2").css({"visibility": "hidden"});
        }
    }

    ocultarymostrarfecha();

    $("body").on("click", "#check", function() {        
        if($("input#check").is(':checked')) {                   
            $("div#div1").css({"visibility": "visible"});
            $("div#div2").css({"visibility": "visible"});
        }
        else {           
            $("div#div1").css({"visibility": "hidden"});
            $("div#div2").css({"visibility": "hidden"});
        }
    });
});

HTML

<div id="cierto">¿Es cierto?
<?php
    if($cierto == 1) {              
        $chequeo = "checked";
    }           

    echo "<input type='checkbox' id='check' name='check' value='1'".$chequeo.">";
?> 
</div>

<div id="div1">
Muestro algo
</div>

<div id="div2">
Muestro otra cosa
</div>

2votos

Peter comentado

Por favor agrega tu HTML a la pregunta para revisar en donde puede estar el error.

Saludos.

1voto

bichomen comentado

Ya he añadido el HTML

2 Respuestas

3votos

Leonardo-Tadei Puntos227320

Hola @bichomen,

lo que tenés que hacer es coordinar el checked con el estado visible o no del DIV al momento de cargar la página.

Por ejemplo:

<div id="cierto">¿Es cierto?
<?php
    $visible = "visible";
    if($cierto == 1) {              
        $chequeo = "checked";
        $visible = "hidden";
    }           

    echo "<input type='checkbox' id='check' name='check' value='1'".$chequeo.">";
?> 
</div>

<div id="div1" style="visibility:<?=$visible?>">
Muestro algo
</div>

<div id="div2" style="visibility:<?=$visible?>">
Muestro otra cosa
</div>

Luego, el comportamiento del checked se puede cambiar a un simple switch, pero esto ya es cuestión de gustos:

$("body").on("click", "#check", function() {        
  // Conmuta DIV1
  if($("div#div1").css("visibility")=="visible");
    $("div#div1").css({"visibility": "hidden"});
  } else {
    $("div#div1").css({"visibility": "visible"});
  }
  // Conmuta DIV2
  if($("div#div2").css("visibility")=="visible");
    $("div#div2").css({"visibility": "hidden"});
  } else {
    $("div#div2").css({"visibility": "visible"});
  }
});

Por último, lo que dice @Alex_Numpaque sobre usar display en vez de visibility es relevante: se comportan igual, pero cuando se usa visibility el elemento sigue ocupando el espacio aunque no se vea, en cambio display hace que además de no verse el elemento desaparezca del flujo de visualización.
Se usa display en general para no craer huecos en la página.

Saludos cordiales!

1voto

bichomen comentado

Gracias @Leonardo-Tadei esa es la solución, en este caso con la propiedad visibility ya me va bien.

:-D

3votos

Alex_Numpaque Puntos17150

Para ocultar un div o un objeto
$("#div1").css("display","none");
Para mostrar un objeto
$("#div1").css("display","block");

1voto

bichomen comentado

Con .css({"visibility": "visible"}); se consigue el mismo efecto, he probado tu código pero el resultado es el mismo.

Como digo clicando en el checkbox se oculta o muestra los divs, pero es cuando se entra en la página, que por defecto los muestra o los esconde según el estilo que le ponga, pero no hace caso al checked, si es que lo tiene.

0voto

Alex_Numpaque comentado

Marcar:<input type='checkbox' id='check' name='check' value='1'> <div id="div1">Muestro algo</div> <div id="div2"> Muestro otra cosa</div> <script> $("#check").click(function() { if($(this).is(":checked")){ $("#div1").css('display','none'); $("#div2").css('display','none'); }else{ $("#div1").css('display','block'); $("#div2").css('display','block'); } }); </script>

1voto

bichomen comentado

@Alex_Numpaque como dije desde un principio el problema no esa en el evento click del checkbox, sino en valor inicial del mismo, pero ya lo solucione, gracias igualmente.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta