show and hide control in single event - jQuery
Demo and code for how to show and hide an HTML control in single event using jQuery
by Athil
Posted on 22 Jun 2019 Category: jQuery
Views: 1541
Here I am going to show how to use 'jQuery toggle', Where jQuery toggle is using for hiding the control if the control is visible and showing the control if the control is hidden.
DEMO
toggle with ID
$("#txt1").toggle();
Where 'txt1' is the id of the control and Id will start with #.
toggle with class name
Where ".classname" and class name will start with dot (.) symbol
toggle with speed
Where 300 is the time limit.
$(".classnamespeed").toggle(300);
Where 300 is the speed.
Full Demo Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Demo for jQuery toggle </h1>
<input type="text" id="txt1"/>
<button type="submit" onclick ="togglewithid();">toggle with id </button> <br/>
<input type="text" class="clasname" />
<button type="submit" onclick ="togglewithclass();"> toggle with class </button> </br>
<input type="text" class="classnamespeed"/>
<button type="submit" onclick ="togglewithspeed();">toggle with speed </button> </br>
</body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
function togglewithid()
{
$("#txt1").toggle();
}
function togglewithclass()
{
$(".clasname").toggle();
}
function togglewithspeed()
{
$(".classnamespeed").toggle(300);
}
</script>
</html>