Toggle in Javascript

Toggle in Javascript

In this tutorial, we will learn about toggle class javascript. In JavaScript, a toggle function is used to switch between two states or values of a variable or element. The toggle function is often used to create a simple on/off switch, such as toggling the visibility of an element or toggling the state of a checkbox or button.

The toggle() method is a built-in method of the javascript classList toggle. It toggles the presence of a class in an element’s list of classes, adding it if it doesn’t exist and removing it if it does.

Here’s an example of how to use toggle() in JavaScript to toggle the visibility of an HTML element when a button is clicked or javascript toggle button :

in Javascript toggle, 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 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 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.  

Below is a program to understand how we use the toggle javascript UsingΒ classList.toggle()Β Method

The classList property of an element is a DOMTokenList object. It is a list of all the classes of an element. It is a read-only property.

The classList object has a toggle() method which can be used to add or remove a class from an element.

Syntax :

classList.toggle(className);

The toggle() method takes a class name as an argument and if the class is present in the element, it will be removed, otherwise it will be added.

The following example shows how to use classList.toggle() method to toggle a class on an element.

Code :

<button onclick="toggleClass()">Click me</button>
<p class="box">This is a paragraph.</p>

<script>
  // using classList.toggle() method
  const para = document.querySelector('.box');

  function toggleClass() {
    // toggle class
    para.classList.toggle('box');
  }
</script>

Output :

Click me
This is a paragraph

Example 4 :

Here’s an another example of how to use toggle() in JavaScript to toggle the visibility of an HTML element when a button is clicked or javascript toggle button :

<button onclick="toggleElement()">Toggle Element</button>
 <div id="my-element">This is my element.</div>   
<script> function toggleElement() { var element = document.getElementById("my-element"); element.classList.toggle("hidden"); }
 </script>
 <style> 
.hidden { 
display: none; 
} 
</style> 

In this example, the toggleElement() function is triggered when the button is clicked. It finds the my-element div using getElementById() and toggles the hidden class on and off using classList.toggle(). The hidden class is defined in the CSS to hide the element with display: none;.

When the button is clicked, the my-element div will be hidden if it’s currently visible, or shown if it’s currently hidden.

Leave a comment

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