javascript toggle classes 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: toggle class to an element javascript

// html <div class="parentElm" id="addActive"></div>

// js
function toggleClass(){
  // get the properties of an element
  var element = document.getElementById("addActive");
  
//  check if the element have class list
  if (element.classList) {
    // add active class if true
   element.classList.toggle("active");
  } else {
   var classes = element.className.split(" ");
   var i = classes.indexOf("active");
  }
 }

Example 4: how to add toggle class in javascript using css modules

onClick() {
    alert("clicked");
    $('.'+ styles.transform ).toggleClass(styles.transform-active);
  }

Example 5: how to change class by is in js by toggle

<button class="" id="changeicon">
	<i id="slideshow" class="fas fa-hamburger"></i>
</button>

$("#changeicon").click(function() {
			$("#slideshow").toggleClass("fa-times");
		});

Tags:

Css Example