jQuery hide(), show(), and toggle() Functions
hide() Method
The hide() method hides the selected elements by setting their display property to none.
$("#element").hide();show() Method
The show() method displays the selected elements by removing the display: none style if it was applied.
$("#element").show();toggle() Method
The toggle() method toggles the visibility of the selected elements. If the elements are visible, toggle() will hide them, and if they are hidden, toggle() will show them.
$("#element").toggle();All in one Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide and Show</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".box").hide(2000);
});
$(".btn2").click(function(){
$(".box").show(1000);
});
$(".btn3").click(function(){
$(".box").toggle(500);
});
});
</script>
</head>
<body>
<style>
.box{
background-color: blueviolet;
width: 200px;
height: 200px;
margin:50px;
}
</style>
<div class="box"></div>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<button class="btn3">Toggle</button>
</body>
</html>