jQuery toggle() to show and hide a control in single event
Demo and Code for jQuery toggle to hide and show control in same control event.
by Athil
Posted on 23 Jun 2019 Category: jQuery
Views: 2872
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
DOWNLOAD 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>