Vanilla JavaScript: How to Toggle Multiple CSS-Classes in One Statement

Vanilla JavaScript: Is there a way to toggle multiple CSS-classes in one statement?

The following should work; granted that these class-names are defined in your CSS and some elements on the current page have these classNames:

var toggleDirection = function()
{
    var ltr, rtl, lst, cls;

    ltr = 'left-to-right';
    rtl = 'right-to-left';
    lst = [].slice.call(document.getElementsByClassName(ltr));

    lst = ((lst.length > 0) ? lst : [].slice.call(document.getElementsByClassName(rtl)));

    lst.forEach
    (
        function(node)
        {
            cls = node.getAttribute('class');

            if (cls.indexOf(ltr) > -1)
            { cls.split(ltr).join(rtl); }
            else
            { cls.split(rtl).join(ltr); }

            node.setAttribute('class', cls);
        }
    );
}

How to toggle multiple elements with same class name on click

You are selecting only one element, change querySelector to querySelectorAll and then use a loop.

const btn = document.getElementById('btn');
const para = document.querySelectorAll('.para');

btn.addEventListener('click',()=>{
  para.forEach(el => {
    el.classList.toggle('red');
  })
})

Javascript - Toggle Multiple Classes onclick

I have modified your script and created a fiddle so you see how it works: https://jsfiddle.net/eyrpdsc2/

The toggle accepts a string as a parameter, not a Node. So you need to pass 'btn_active' instead of btnActive. Also keep in mind that querySelectorAll returns a NodeList (not an array) so you cannot use forEach.

var menuBtn = document.querySelectorAll(".menu_btn");
var mainNav = document.querySelectorAll(".main_nav");
var container = document.querySelectorAll(".container");

for (var i = 0; i < menuBtn.length; ++i) {
    menuBtn[i].addEventListener('click', toggleClasses);
}

function toggleClasses() {
        var i = 0;
    for (i = 0; i < mainNav.length; ++i) {
        mainNav[i].classList.toggle('btn_active');
    }
    for (i = 0; i < container.length; ++i) {
        container[i].classList.toggle('container_active');
    }
}

Target multiple classes with classList.toggle

Yes, but it involves a loop. You can use querySelectorAll then call .classList.toggle on each element in the resulting list:

function toggleMe() {
    const list = document.querySelectorAll('.header, .another-class');
    for (const element of list) {
        element.classList.toggle('toggled');
    }
}

Example:

// Menu Toggle
function toggleMe() {
    const list = document.querySelectorAll('.header, .another-class');
    for (const element of list) {
        element.classList.toggle('toggled');
    }
}

p {
  display: none;
}

.toggled p {
  display: block;
}

<button onclick="toggleMe()">Toggle Me</button>

<div class="header">
  <p>.toggled class has been added!</p>
</div>

<div class="another-class">
  <p>.toggled class has been added!</p>
</div>

Vanilla JS (no jQuery) - How to toggle more than one class at once?

Unfortunately, .toggle accepts only one argument: the one class name you wish to toggle. To be DRY, you'll have to iterate over an array of class names, or save the classList in a variable and call .toggle twice:

function openModal(modalID) {  const { classList } = document.getElementById(modalID);  classList.toggle('hidden');  classList.toggle('visible');}

.hidden {  display: none;}.visible {  display: block;}

I agree to accept the<a href="#" onclick="openModal('tandcmodal')">       terms and conditions</a> of this website.

<div id="tandcmodal" class="hidden">  Content of the modal</div>

Toggle multiple css classes on div with javascript

Please check this https://jsfiddle.net/maflorezp/1u3xjxaq/1/

You have some errors walking the elements and you need validate class before change

function changeBackground() {
    var all = getSelected();

    for (var i = 0; i < all.length; i++) {
        var color = all[i].classList;
        if(color.contains("blue")){
          all[i].classList.add("green");
          all[i].classList.remove("blue");
        } else if(color.contains("red")){
          all[i].classList.add("blue");
          all[i].classList.remove("red");
        } else if(color.contains("yellow")){
          all[i].classList.add("red");
          all[i].classList.remove("yellow");
        } else if(color.contains("green")){
          all[i].classList.add("yellow");
          all[i].classList.remove("green");
        }        
    }
}

Is there a way to add/remove several classes in one single instruction with classList?

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

is equal

elem.classList.add("first","second","third");

How can I toggle two classes in two divs in pure javascript?

Use Element.classList.toggle()

var cards = document.querySelectorAll('.card')
Array.from(cards).forEach(function(card) {  card.addEventListener('click', function() {    Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {      ['back', 'front'].forEach(function(s) {        el.classList.toggle(s)      });    });  });});

.card {  width: 200px;  height: 300px;  position: relative;  perspective: 1000px;  cursor: pointer;}
.front,.back {  width: 100%;  height: 100%;  position: absolute;  display: flex;  justify-content: center;  align-items: center;  transition: 1s;  backface-visibility: hidden;  border-radius: 10px;}
.front {  transform: rotateY(360deg);}
.back {  transform: rotateY(180deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="card">  <div class="front">Front</div>  <div class="back">Back</div></div>

---

Related Topics