In this article we will go through a concept where we toggle class on click, so when user click on button we will add class open and if user click again we will remove that open class, The toggle() method of the DOMTokenList interface removes an existing token from the list and returns false. If the token doesn’t exist it’s added and the function returns true. Through Javascript toggle class show and hide we can create multiple attractive functionality and features. like toggle mobile menu, javascript dropdown menu, javascript accordians
Lets create simple javascript toggle method where we create a button and on button click we will show and hide the content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="button-container">
<button id="main-button">Click Me</button>
<div class="mainContiner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<script>
document.getElementById("main-button").addEventListener("click",function(){
document.querySelector(".mainContiner").classList.toggle("open");
})
</script>
<style>
.mainContiner {
display: none;
width: 80%;
margin: 30px auto;
position: relative;
}
.mainContiner.open {
display: block;
}
.button-container {
width: 1000px;
margin: 0 auto;
position: relative;
text-align: center;
}
.button-container button {
width: 150px;
height: 40px;
border: 0;
background: #000000;
color: #ffffff;
}
</style>
</body>
</html>In this example, when the button is clicked, we are toggling class on mainContiner which is adding and removing open class
Understanding the toggle() Method
The toggle() method is part of the classList API and is designed to simplify the process of adding and removing classes. Its syntax is straightforward:
element.classList.toggle(className); // where element is the queryselector where we want to add or remove the classOther usage of toggle()
The toggle() method can also accept a second argument, which is a boolean (true of false) value. If this second argument is true, the class will be added; if false, it will be removed. This allows for more controlled behavior when toggling classes.
<script>
document.getElementById("main-button").addEventListener("click",function(){
document.querySelector(".mainContiner").classList.toggle("open" , isAdded);
})
</script>In this case, you can control whether the class is added or removed based on the isAdded parameter, providing flexibility in how classes are managed.
