title: Toggle menu using javascript
body: <p>I need to have toggle-open listen for a click and then CHANGE the class name of toggle-box to 'open'. And then have toggle-close listen fora a click and then CHANGE the class name of toggle-box to 'close'. Here is the code that I have already and it's not working, any suggestions? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;Drop Down&lt;/title&gt;
      &lt;link rel="stylesheet" href="dropdown.css" type="text/css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="toggle-box" class="close"&gt;
      &lt;div id="toggle-open"&gt;Settings&lt;/div&gt;
      &lt;div id="toggle-close"&gt;Close&lt;/div&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;label for="s-1"&gt;
                  &lt;input id="s-1" type="checkbox" checked&gt;
                  &lt;span&gt;Setting One&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label for="s-2"&gt;
                  &lt;input id="s-2" type="checkbox" checked&gt;
                  &lt;span&gt;Setting Two&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label for="s-3"&gt;
                  &lt;input id="s-3" type="checkbox"&gt;
                  &lt;span&gt;Setting Three&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label for="s-4"&gt;
                  &lt;input id="s-4" type="checkbox" checked&gt;
                  &lt;span&gt;Setting Four&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label for="s-5"&gt;
                  &lt;input id="s-5" type="checkbox"&gt;
                  &lt;span&gt;Setting Five&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;p style="margin-top: 100px; text-align: center; font-size: 75%;"&gt;&lt;a href="../dropdown.zip"&gt;Download the files (dropdown.zip)&lt;/a&gt;&lt;/p&gt;
  &lt;script src="dropdown.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>>
  </p>