jQuery alternar visibilidad
- jQuery alternar visibilidad
-
Utilice los métodos
show()yhide()para alternar la visibilidad de un elemento en jQuery -
Utilice el método
css()para alternar la visibilidad de un elemento en jQuery
Este tutorial demuestra cómo alternar la visibilidad de un elemento usando jQuery.
jQuery alternar visibilidad
Podemos alternar la visibilidad de un elemento HTML usando el método jQuery toggle(). Esto implementa los métodos mostrar () y ocultar () para implementar la funcionalidad de alternar.
La sintaxis de este método es:
toggle( speed, [callback])
Como podemos ver, el método toma dos parámetros. Ambos son opcionales, donde la “velocidad” es la velocidad de la animación alterna que tiene tres valores de cadena “lenta”, normal o “rápida”, o cualquier valor entero en milisegundos, y la “devolución de llamada” es la función que puede ser llamado una vez que se complete la animación.
Probemos un ejemplo simple con ambos parámetros opcionales:
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle() method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function(){
$("#toggleDiv").toggle( 'slow', function(){
$("#Info").text('The visibility toggle is performed');
});
});
});
</script>
<style>
#toggleDiv {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<button id = "toggle"> Toggle the Element </button>
<div id = "toggleDiv">
<h1>Delftstack</h1>
</div>
<div id = "Info"></div>
</body>
</html>
El código anterior alternará el elemento div dado en cada clic de botón y mostrará la información una vez que se complete la alternancia.
Ver la salida:
Utilice los métodos show() y hide() para alternar la visibilidad de un elemento en jQuery
jQuery también proporciona métodos show() y hide() para realizar operaciones individuales. También podemos implementar estos métodos juntos para alternar un elemento en jQuery.
La sintaxis de estos métodos es:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
La velocidad y la devolución de llamada son los mismos parámetros que el método toggle(). Probemos un ejemplo simple de alternar usando estos métodos:
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Show Hide methods</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1:visible").length ){
$("#Demobox1").hide("slow");
} else {
$("#Demobox1").show("slow");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2:visible").length ){
$("#Demobox2").hide("slow");
} else {
$("#Demobox2").show("slow");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3:visible").length ){
$("#Demobox3").hide("slow");
} else {
$("#Demobox3").show("slow");
}
});
</script>
</body>
</html>
El código anterior funcionará de manera similar al método toggle(). Ver la salida:
Utilice el método css() para alternar la visibilidad de un elemento en jQuery
También podemos usar el método jQuery css() para alternar la visibilidad de un elemento. Para realizar eso, tenemos que crear condiciones para que si la visibilidad del div está oculta, entonces se establece en visible y viceversa.
La sintaxis del método css() es:
$("#Demobox1").css("visibility","hidden");
$("#Demobox1").css("visibility","visible");
Si la visibilidad está oculta, configúrela como visible. De lo contrario, si está visible, configúrelo como oculto.
Probemos un ejemplo:
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Css method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1").css("visibility") == "visible" ){
$("#Demobox1").css("visibility","hidden");
} else {
$("#Demobox1").css("visibility","visible");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2").css("visibility") == "visible" ){
$("#Demobox2").css("visibility","hidden");
} else {
$("#Demobox2").css("visibility","visible");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3").css("visibility") == "visible" ){
$("#Demobox3").css("visibility","hidden");
} else {
$("#Demobox3").css("visibility","visible");
}
});
</script>
</body>
</html>
El código anterior contiene tres divs diferentes para los cuales la visibilidad se puede alternar usando los diferentes botones configurando la propiedad de visibilidad CSS.
Ver la salida:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook