Updated April 11, 2023
Introduction to JavaScript Toggle
In JavaScript toggle is one of the feature and it is used as default method for handling the hide() and show() for the selected elements. Meanwhile the method also checks with the particular selected elements for visibility and using show() method for displaying the elements and hide() method is for the hidden elements. When it is in visible state this effect is also known as toggle effect the toggle also add and remove the class names from an element in the entire javascript using <div> tag we can add the toggle class name with the help of id attribute it may require the CSS style sheet.
Syntax and Parameters:
The javascript methods have their default syntax and rules to use them in html web pages.
<html>
<body>
<script>
function functionName()
{
--logics for showing and hiding the UI elements in the page----
We can write the logic and test using some if conditions etc---
}
</script>
</body>
</html>In the above codes we have written the sample code for using toggle feature in the html web pages. Based on the requirements it may used in the different segments sometimes the toggle used from like, dislike, dark mode, text and classes these are some features available in the javascript toggle feature.
How Toggle is Done in JavaScript?
The javascript toogle feature is one for enabling and disabling the web page contents based on the requirements. Mainly the feature is enabled for showing and hiding the data’s in the web application the elements are checked for only the particular selected elements for visibility feature. The show() method runs only if the element is in hidden position and if the method is hide() only for visible status. This effect is also known as toggle effect.
The toggleClass() method is used for toggles while we are adding and removing the one or more class names from the required selected elements. If the class names are added only if the elements are missing and they are already removed in the set toggleClass() same used in the javascript library called jquery. The toggle feature will add the css style sheet using <div> tag with the help of id it will call the other classes when we use the another class also called the thorn it these classes are used and called in css file but in javascript elements like classList it’s a read only property which will returns the DOMTOKENLIST of the html elements.
When we use the domtokenlist it’s a interface and it have two set of properties called value and length for classList, the value of property has returns the list of class names as string data type and the length property has some specified number of classes are stored in the instance or object. To add one more classes to the <div> element we have to just add the method chain has add() to the classList element property. If suppose the class name already exists in the <div> tag element the class attributes are used in add() method it will be ignored it.
The Removing class elements will require the use of the remove() method in the css style sheet and it belongings to the classList property of the html elements. We will add and remove the multiple number of css classes using method called add() and remove() method. We can use the contains() method for work out the codes to toggle between the class name of the element. Most often we used toggle classes has occurrence of some events like click. We have used <button> tag element in the html codes while we have used the toggle in the script at the time using <div> tag element id on click of it. So that’s wise JavaScript has some pre-defined built-in method for toggle() classes.
Examples of JavaScript Toggle
Given below are the examples mentioned :
Example #1
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
.first {
color: green;
}
.second {
color: red;
}
</style>
</head>
<body>
<div id="demo" class="first">Welcome To My Domain</div>
<footer>
<small>Have a Nice Day <a href="www.google.com">Gud day</a></small>
</footer>
<script>
function third() {
this.classList.toggle('first');
this.classList.toggle('second');
}
document.querySelector('#demo').addEventListener('click', third);
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sample {
width: 103%;
padding: 28px;
background-color: green;
color: white;
font-size: 27px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Please Click and try for the toggle scenario using “Try it" button Welcome User</p>
<p><strong>Welcome to My Domain:</strong>The toggleClass() method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.</p>
<button onclick="demo()">Try it</button>
<div id="first">
Welcome User for getting the knowledge regarding toogle feature
</div>
<script>
function demo() {
var e = document.getElementById("first");
if (e.classList) {
e.classList.toggle("sample");
} else {
var c = e.className.split(" ");
var x = c.indexOf("sample");
if (x >= 0)
c.splice(x, 1);
else
c.push("sample");
e.className = classes.join(" ");
}
}
</script>
</body>
</html>Output:
After clicking on the Try it Button:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
font-size:103px;
cursor: pointer;
user-select: none;
width: 103%;
padding: 28px;
background-color: green;
color: white;
font-size: 27px;
box-sizing: border-box;
}
.fa:hover {
color: blue;
width: 103%;
padding: 28px;
background-color: green;
color: white;
font-size: 27px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Please click the icon for using the toggle feature for these options thumbs-up and thumbs-down (like/dislike):</p>
<i onclick="demo(this)" class="fa fa-thumbs-up"></i>
<script>
function demo(i) {
i.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>Output:
In the above examples we used toggle feature for different scenarios in javascript at the same time we used default classes of the script and similarly we called some css styles to achieve these functionalities in the html web pages. Moreover we have used the toggle feature for hiding and showing the important datas.
Conclusion
In conclusion part the toggle is used as the important feature of the JavaScript because it is mostly used that has the user point of scenarios. It will hide the datas whenever the user needs is going to display it in the page. It supports all type of browsers.
Recommended Articles
This is a guide to JavaScript Toggle. Here we discuss the introduction to JavaScript Toggle, how does it work along with programming examples. You may also have a look at the following articles to learn more –
