Javascript toggle class show and hide

javascript toggle class show and hide div

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

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:

Other 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.

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.

Further reading