JavaScript - Mostra ocultar div con display block / none

 
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