Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Mostra ocultar div con display block / none

JavaScript - Mostra ocultar div con display block / none

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Luis Alfredo
Val: 1
Ha aumentado su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostra ocultar div con display block / none

Publicado por Luis Alfredo (1 intervención) el 23/02/2019 14:55:55
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
        $(".bt_sidebar").click(function(evento){
 
            var valor = $(this).val();
 
            if(valor == '.sidebar'){
                $(".sidebar").css("display", "block");
                $(".sidebar").css("display", "none");
            }else{
                $(".sidebar").css("display", "none");
                $("sidebar").css("display", "block");
            }
    });
});

Tengo esta función para ocultar y mostrar un div pero funciona ocultándolo luego ya no lo vuelve a mostrar.
El div es una columna que al ocultarse deja el espacio para que las columnas aledañas ocupen dicho espacio en forma proporcional, esto lo hago con flebox.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostra ocultar div con display block / none

Publicado por ScriptShow (692 intervenciones) el 24/02/2019 11:46:08
Saludos Luis Alfredo,

hay varias formas de enfocar el script; la primera no precisa librerías de terceros. Veamos unos ejemplos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function test() {
var x = document.querySelector('.sidevar');
if (x.style.display === 'none') {
x.style.display = 'block';
}
else {
x.style.display = 'none';
}
}
</script>
 
<button onclick="test()">V E R</button>
 
<div class="sidevar" style="display:none">
Contenido del DIV...
</div>

Una variante del tuyo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(document).ready(
function(){$(".bt_sidebar").toggle(
function(){$(".sidebar").css({"display": "block"});},
function(){$(".sidebar").css({"display": "none"});
});
});
</script>
 
<button class="bt_sidebar">V E R</button>
 
<div class="sidebar" style="display:none">
Contenido del DIV...
</div>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar