Toggle class to an element by click another element

You don't really need javascript. Checkboxes work great at storing on/off state. You just need to get a little crafty with the CSS to use it elsewhere. Here is an example:

label.divcheck { color:blue; text-decoration:underline; }
input.divcheck { display:none; }

input.divcheck + div { display:none; }
input.divcheck:checked + div { display:block;}

<label class="divcheck" for="navigation">Button Nav</label>
<label class="divcheck" for="other">Button Other</label>

<input type="checkbox" class="divcheck" id="navigation"/>
<div class="navigation">
Foo
</div>

<input type="checkbox" class="divcheck" id="other"/>
<div class="navigation">
Other
</div>

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;
}

<a id="button">Button</a>

<div class="navigation">Foo</div>
<div class="navigation">Foo</div>
<div class="navigation">Foo</div>

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

You need to add event handlers. This can be done by simple setting the onClick property on the Element object:

document.getElementById('button').onClick = function onClick() {
  document.getElementsByClassName('navigation')[0].className += 'open';
};

However, it's preferable that you use addEventListener so multiple event listeners can be added to the same element:

document.getElementById('button').addEventListener('click', function onClick() {
  document.getElementsByClassName('navigation')[0].className += 'open';
}, false);

EDIT: It's also better to cache your element references in variables like so:

var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];

button.addEventListener('click', function onClick() {
  nav.className += 'open';
}, false);

EDIT2: as in Zakaria's answer, you may want to use classList.add(x) instead of className += x. It's more in line with how jQuery's things work. However, be aware that classList is not supported in older versions of IE.

EDIT3: Here's a final version using classList.toggle

var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];

button.addEventListener('click', function onClick() {
  nav.classList.toggle('open');
}, false);

And here's a quick replacement for classList using className instead:

function classList(elem) {
  var cl = {
    add: function (clas) { 
      elem.className += clas; 
    },
    remove: function (clas) { 
      elem.className = elem.className.replace(clas, ''); 
    },
    toggle: function (clas) {
      if (elem.className.indexOf(clas) > -1) {
        cl.remove(clas);
      } else {
        cl.add(clas);
      }
    }
  };
  return cl;
}

// usage
classList(nav).add('open');
classList(nav).toggle('open');

Try this:

document.querySelector('div.navigation').classList.toggle('open');

This will work if you only have one div element that has the class navigation. It would be better to give it an id, for example id=navigation