Toggle in Javascript

Toggle in Javascript

The term toggle in javascript is basically used to switch back and forth between different tabs. It could either be the settings or the program or switch between multiple programs or even switch between multiple settings. For example, if a user is writing a program and he wants to use the calculator along with the coding, he cal toggle between the program and the software program and the calculator.

We use toggle class in javascript to toggle between the addition and deletion of a class name in reference to an element in javascript.

Below is a program to understand how we use the toggle in javascript without using toggle()

<button onclick="myFunction()">Try the function</button>
<div id="myDIV">
This is www.developerhelps.com.
</div>

The output of this javascript code will be:

Try the function
This is www.developerhelps.com.

Program toggle() function

<html> 
<head> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function() { 
$("button").click(function() { 
$("#gfg").toggle(); 
}); 
}); 
</script> 
<style> 
#gfg { 
color: green; 
border: 5px solid black; 
width: 200px; 
text-align: center; 
} 
</style> 
</style> 
</head>  
<body> 
<div id="gfg">www.developerhelps.com</div><br>
<button>Click to hide() and show() the above div</button> 
</body> 
</html>

The output of the following javascript program will be:

Before Click Button:Β 

toggle in javascript

After Click Button:

jquery toggle method

Toggle() can also work between hiding and showing elements. This function will be done for selected elements only.

We can use show() which runs the element. Otherwise, we use hide(), if an element is visible. We call this a toggle effect.

Below program will help you in better understanding of toggle() function.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Click the "Try out the function" button to toggle between elements:</p>
<button onclick="myFunction()">Try out the function</button>
<div id="myDIV">
This is www.developerhelps.com
</div>
<p><b>Note:</b> The element will not take up no space</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html> 

The output of the above program will be:

Click the "Try out the function" button to toggle between elements
Try out the function
This is www.developerhelps.com
Note: the element will not take up any space

There is a feature of the toggle class. A class name can be assigned dynamically if there no class assigned to the element. This can only be done if a certain class is already present. We can use toggle() to remove it. There are other functions to perform this also such as add(), remove(), contains() in javascript. Β 

Leave a comment

Your email address will not be published. Required fields are marked *