title: Toggle modal with vanilla javascript
body: <p>I'm used to working with jQuery but I'm trying to get back to vanilla javascript. I have a link that when clicked will reveal an account modal.</p>
  
  <p>I also want to change the class of the modal when clicked to 'modal-visible'. This works as expected, but then when I click the link again to close the modal, I need the class to change back to 'modal-hidden'.</p>
  
  <p>I wondered if someone could help me with that. Perhaps it needs a toggle instead?</p>
  
  <pre><code>var accountModal = document.getElementById("account-modal");
  document.querySelector('#account-photo').addEventListener('click', function(e) {
      e.preventDefault();
      accountModal.classList.add('modal-visible');
      accountModal.classList.remove('modal-hidden');
      accountModal.setAttribute('aria-hidden', 'false');
  });
  
  &lt;a id="account-photo" href="/customer" tabindex="0" aria-expanded="false"&gt;Account&lt;/a&gt;
  &lt;div id="account-modal" class="modal-visible" aria-label="Account Information" aria-hidden="false"&gt;Account Info&lt;/div&gt;
  </code></pre>