Classlist.toggle Javascript Code Example

Example 1: toggle css class in javascript

/* var or const followed by its name */.getElementById(/* HTML element ID */); /* var or const's name */.classList.toggle(/* Name of CSS class */); // I hope this helps!

Example 2: classname toggle js

document.getElementById('myButton').onclick = function() {     this.classList.toggle('active'); }

Example 3: js classlist

classList.item(index); // Returns the item in the list by its index, or undefined if index is greater than or equal to the list's length classList.contains(token); // Returns true if the list contains the given token, otherwise false. classList.add(token1[, ...tokenN]); // Adds the specified token(s) to the list. classList.remove(token1[, ...tokenN]); // Removes the specified token(s) from the list. classList.replace(oldToken, newToken); // Replaces token with newToken. classList.supports(token); // Returns true if a given token is in the associated attribute's supported tokens. classList.toggle(token[, force]); // Removes token from the list if it exists, or adds token to the list if it doesn't. Returns a boolean indicating whether token is in the list after the operation. classList.entries(); // Returns an iterator, allowing you to go through all key/value pairs contained in this object. classList.forEach(callback[ ,thisArg]); // Executes a provided callback function once per DOMTokenList element. classList.keys(); // Returns an iterator, allowing you to go through all keys of the key/value pairs contained in this object. classList.values(); // Returns an iterator, allowing you to go through all values of the key/value pairs contained in this object.

Example 4: toggle class javascript

var menu = document.querySelector('.menu') // Using a class instead, see note below. menu.classList.toggle('hidden-phone');

Example 5: how to get a toggle button to do different js functions

var clicked = false;  function toggleBtnClick() {   var img = document.getElementById('baseImg');   if (clicked) {     img.src = 'http://via.placeholder.com/350x150/e9e9e9/000000';     clicked = false;   } else {     img.src = 'http://via.placeholder.com/350x150/3fafed/000000';     clicked = true;   } }

Example 6: css class list

var myElement = document.getElementById("myElementID"); myElement.classList.add("style1 style2"); myElement.classList.remove("style1 style2");