Hide, Show and Toggle Method in jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hide, Show and Toggle Method in jQuery</title>
<style>
#box {
background-color: lightgreen;
padding: 10px;
border: 2px solid #000;
}
</style>
</head>
<body>
<h1>jQuery Hide, Show and Toggle Method</h1>
<div id="box">
<h2>Test Box</h2>
<p>Lorem ipsum <span>dolor, sit amet</span> consectetur adipisicing elit. Fugiat, natus cupiditate. Iure alias
ex suscipit. Autem unde dolores ex magnam corporis itaque asperiores, quibusdam veniam quisquam ad nihil
exercitationem non.</p>
</div>
<br>
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<button id="hidePara">Hide Paragraph</button>
<button id="showPara">Show Paragraph</button>
<button id="slowHide">Slow Hide</button>
<button id="slowShow">Slow Show</button>
<button id="toggleBtn">Toggle</button>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#hideBtn").click(function () {
$("#box").hide();
});
$("#showBtn").click(function () {
$("#box").show();
});
$("#hidePara").click(function () {
$("#box p").hide();
});
$("#showPara").click(function () {
$("#box p").show();
});
$("#slowHide").click(function () {
//$("#box").hide("slow");
//Slow Hide in 3000 miliseconds as shown below :
//$("#box").hide(3000);
//Callback function which is Optional as shown below :
$("#box").hide(3000, function () {
console.log("Now it is hidden");
});
});
$("#slowShow").click(function () {
//$("#box").show("slow");
//Slow Show in 3000 miliseconds as shown below :
//$("#box").show(3000);
//Callback function which is Optional as shown below :
$("#box").show(3000, function () {
console.log("Now it is shown");
});
});
$("#toggleBtn").click(function () {
$("#box").toggle(2000, function () {
console.log("Now it is toggling");
});
});
});
</script>
</body>
</html>
.png)
.png)
.png)
Comments
Post a Comment