How do I change the properties of a <div> with a toggled class?
<p>I have a <code>&lt;div class="content toggle"&gt;</code> that I have hidden until a certain event is called, and then I add a class to it to show that it needs to be visible.</p>

<p>My current CSS looks like:</p>

<pre><code>.content {
  display: none;
}

.content.visible {
  display: block;
}
</code></pre>

<p>My code for adding <code>.visible</code> looks like this:</p>

<pre><code>[].forEach.call(document.getElementsByClassName('toggle'), function(x) {
  x.classList.toggle('visible');
});
</code></pre>

<p>But, when the class <code>.visible</code> is added, the <code>&lt;div&gt;</code> is still <code>display: none;</code>.  What's happening here?  How can I fix it?</p>