How to toggle class "open", "closed" on an array in vanilla javascript
<p>To get a better idea what i'm doing look here for my previous code that i try to make a little better >><a href="http://codepen.io/motion_max/pen/gPXPVj" rel="nofollow">Codepen</a></p>

<p>I want to have an array that i fill up with all the <code>id's</code> that i try to animate and with one function toggle the classes <code>.open</code> <code>.closed</code> on every <code>id</code> in the array.</p>

<p>so on an click add <code>.open</code> to <code>#Hamburger, #Navigation, #Black-filter</code>. and one second click remove <code>.open</code> and add <code>.closed</code> for those <code>id's</code>. </p>

<p>because i'm still learning javascript i want it to work in vanilla javascript so i understand the basics before im going on with jquery.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var hamburger = document.getElementById('Hamburger');
var navigation = document.getElementById('Navigation');
var blackFilter = document.getElementById('Black-filter');
var isOpen = true; // true or false

var animation = [h, s, b]; // #H #S #B
var open = "open"; // .open
var closed = "closed"; // .closed



function trigger() {
  if (isOpen === true) {
    animation.classList.add(open); // add .open to all id's
    animation.classList.remove(closed); // remove .closed from all id's
  } else {
    animation.classList.add(closed);
    animation.classList.remove(open);
  }
  isOpen = !isOpen; // toggles true to false
}

hamburger.addEventListener('click', trigger, false); // onclick toggle class
blackFilter.addEventListener('click', trigger, false); // onclick toggle class</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  width: 100%;
}
#Hamburger {
  height: 100px;
  background: red;
  width: 100px;
}
#Hamburger.open {
  opacity: 0.5;
}
#Hamburger.closed {
  opacity: 1;
}
#Navigation {
  height: 100px;
  background: blue;
  width: 100px;
}
#Navigation.open {
  opacity: 0.5;
}
#Navigation.closed {
  opacity: 1;
}
#Black-filter {
  height: 100px;
  background: green;
  width: 100px;
}
#Black-filter.open {
  opacity: 0.5;
}
#Black-filter.closed {
  opacity: 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id="Hamburger"&gt;&lt;/div&gt;
  &lt;div id="Navigation"&gt;&lt;/div&gt;
  &lt;div id="Black-filter"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>