title: Dropdown javascript block
body: <p>I have a problem with javascript dropdown clicking menu.
  I need show some content after clicking header of box.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id='cookiemenu'&gt;
                  &lt;div class='cookiemenu_header' onclick='ShowCookieBox()'&gt;
                      Test
                  &lt;/div&gt;
                  &lt;div id="cookiemenu_dropwdown" class='cookiemenu_content'&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
                  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>  #cookiemenu {
    width:100%;
    overflow: hidden;
    display:block;
  
  }
  #cookiemenu div.cookiemenu_header {
    width:100%;
    display:block;
    margin-top: 0px;
    background-color: #0B3954;
    color:#FFFFFF;
    text-align: center;
    height: 25px;
    font-size: 20px;
    line-height: 25px;
  }
  #cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
    cursor: hand;
    text-decoration: underline;
  }
  div.cookiemenu_content {
  }
  .ShowCookieBox {
    display:block;
    border:2px solid #red;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&lt;script&gt;
   function ShowCookieBox() {
      document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>It's not working at all. Can someone tell me why?</p>
  
  <p>And the second question. Is there any chance to change the JS so It could save "status" of box (showed or hidden) in cookies? So user can leave it, close page and on the next visit it stays as he leaved it?</p>