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>

Peter comentado Jun 15

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

Saludos.

bichomen comentado Jun 16

Ya he añadido el HTML

2 Respuestas

3votos

Leonardo-Tadei Puntos214700

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!

bichomen comentado Jun 19

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

:-D

3votos

Alex_Numpaque Puntos15560

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

bichomen comentado Jun 16

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.

Alex_Numpaque comentado Jun 16

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>

bichomen comentado Jun 19

@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.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

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

Conecta