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');
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>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>