Toggle class to an element by click another element

Question

I want to click on an element to toggle a class being referenced on a completely unrelated element (not a child, parent or sibling)

For example, initially the code w

Answer 1

Multiple elements with class navigation

navigation is a class, so I assume there is more than one element you would like to give class open on click on element with id button. Do it that way:

function toggleNavigation(element) {
  element.classList.toggle('open');
}

document.getElementById('button').addEventListener('click', function() {
  Array.from(document.getElementsByClassName('navigation')).forEach(toggleNavigation);
});

.navigation {
  background-color: lightgreen;
}
.navigation.open {
  background-color: lightblue;
}

Button

Foo
Foo
Foo

Single element with class or id navigation

If it is otherwise (i.e., there is only one element with class navigation, in which case it should be an id, not a class) you can replace above JavaScript to:

document.getElementById('button').addEventListener('click', function() {
  document.getElementsByClassName('navigation')[0].classList.toggle('open');
});

or if you will change navigation to be an id:

document.getElementById('button').addEventListener('click', function() {
  document.getElementById('navigation').classList.toggle('open');
});