Target multiple classes with classList.toggle

user_1951081 0
Viewed 701

I have a very simple toggle button that adds and removes a class to a <div>. Here's how it looks:

// Menu Toggle
function toggleMe() {
    
    // Header
    var toggleOne = document.querySelector('.header');
    toggleOne.classList.toggle('toggled');
    
    // Another Class
    var toggleTwo = document.querySelector('.another-class');
    toggleTwo.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>

The .toggled class is being added to .header and .another-class.

Is there a way to target multiple classes instead of writing separate variables like I have in my example? I've tried:

var toggle = document.querySelector('.header, .another-class');
javascript
2 Answers

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>

In your specific example, you could instead put the toggled class on a container that has both of those elements in it (document.body if there's nothing more targeted than that), but I'm guessing you have reasons for not wanting to do that. In any case, here's an example:

function toggleMe() {
    document.body.classList.toggle("toggled");
}


// Menu Toggle
function toggleMe() {
    document.body.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>

user_1572470

Use Document.querySelectorAll() that allows CSS like selector and loop through them to toggle the class on the current element:

// Menu Toggle
function toggleMe() {    
    // Header, Another Class
    var toggleEl = document.querySelectorAll('.header, .another-class');
    toggleEl.forEach(el => el.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>

user_74613810
Related