Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

Published on | by
Reza Baharvand
Updated on
Image for Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

Introduction

The toggle() is a method of the DOMTokenList. It removes something like a class name from the list, and returns false. If the class name does not exist, it will add it to the list and return true.

In this tutorial, You will learn to use the toggle() method to control the visibility of HTML elements by clicking on a button.

Demo

You can find the demo on codepen.

Step 1 — Adding a Button And Div To The HTML

In this step, you are going to add a <button> and a <div> to the DOM. The Button is going to execute a function called hideMe() upon clicking.

You will also need to add some text inside the <div> and style it later.

<button onclick="hideMe()">Toggle Visibility</button> <div id="container">Click the "Toggle Visibility" button!</div>

Step 2 — Styling With CSS

To make the changes after toggling the button more distinct, You will need to add some styling to the <div> element.

You also require to define a class that you want to add to the <div> when the button is clicked.

* { box-sizing: border-box; } body { font-family: sans-serif; } #container { width: 100%; background-color: #0096c7; padding: 48px; margin: 24px 0; text-align: center; color: #fff; font-size: 2rem; } .hidden { visibility: hidden; }

Step 3 — Adding Javascript To Toggle The Visibility

In this final step, you will need to write a function to toggle the visibility by adding the .hidden class to the div with #container ID.

function hideMe() { const container = document.getElementById("container"); container.classList.toggle("hidden"); }

In the code above, you have created a function called hideMe(). This function, grabs the <div id="container"> and add/remove the class .hidden on toggle.

Conclusion

In this tutorial, you have learned to use the toggle() method in Javascript and toggle the state of an element based on button clicks.

If you have followed every step in this tutorial, your code should look similar to this demo on codepen.


Recent Posts

Image for Coin Flip Simulator With Javascript And CSS Animations

Coin Flip Simulator With Javascript And CSS Animations

In this tutorial, you will learn to build a small app to toss a coin using HTML, CSS, and Javascript. The possible outcomes after flipping a coin are either "Head" or "tail". The probability of getting head or tail is 50%.

Image for Use Math.PI To Calculate Area And Circumference Of A Circle

Use Math.PI To Calculate Area And Circumference Of A Circle

The "Math.PI" property returns the PI "π" constant, approximately equal to 3.14159. For example, you can calculate the circumference and surface area of a circle using "Math.PI".

Image for Check If A Function Exists Before Calling With The typeof Operator

Check If A Function Exists Before Calling With The typeof Operator

If you are sharing scripts from different modules or you have a large codebase, you can use the `typeof` operator to check if a function exists.

Image for Understand The Comparison Operators In Javascript And Write Logic Like A Pro

Understand The Comparison Operators In Javascript And Write Logic Like A Pro

A comparison operator compares two values with each other, and returns a logical value such as "true" or "false". The operands can be "number", "string", "logical", or "object" values.