title: Creating an onclick event for a button with a dropdown menu
body: <p>I've been learning HTML and CSS for some weeks now and I start feeling comfortable with those. However I'm trying to learn JavaScript too. </p>
  
  <p>I've been working on a button in HTML and CSS, you can view the demo of the button <a href="http://cssdeck.com/labs/gzhhr3ba" rel="nofollow">here.</a></p>
  
  <p>I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.</p>
  
  <p>Is there any simple or understandable way for creating a function which does this in JavaScript?</p>
  
  <p>Here is the code I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="language-wrapper"&gt;
        &lt;a class="language-icon fr" href="#" alt="choose-your-language"&gt;Language&lt;/a&gt;
        &lt;div id="language-dropdown"&gt;
          &lt;h3&gt;Choose your language&lt;/h3&gt;
          &lt;a class="language-links" href="#"&gt;Chinese&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Danish&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Deutsch&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;English&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Espanol&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Filipino&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Hindu&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Italiano&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Norsk&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Nederlands&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Polski&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Portugues&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Svenska&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Suomi&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Turkce&lt;/a&gt;
          &lt;a class="language-links" href="#"&gt;Urdu&lt;/a&gt;
          &lt;p&gt;Do you speak multiple languages or can't find your language? &lt;font color="#d13030"&gt;Help us translate!&lt;/font&gt;&lt;p&gt;
  
        &lt;/div&gt; &lt;!-- end of language-dropdown class --&gt;
      &lt;/div&gt; &lt;!-- end of language-wrapper --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    #language-wrapper { display: inline-block; }
  
      #language-wrapper:hover #language-dropdown { opacity: 1; display: block; }
  
      .language-icon {
        color: #fff;
        font-weight:700;
        padding-right:20px;
        padding-left:30px;
        display:inline-block;
        font-size:11px;
        text-align:right;
        text-decoration:none;
        position:relative;
        left: 0; top: 0;
      }
  
      .fr { background: url("images/language-sprite.png") no-repeat 0 0; }
      .fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }
  
       .language-icon:before {
        content:'\25BE';
        width:0px;
        height:0;
        position:absolute;
        right:16px;
        top: 0;
      }
  
      .language-icon:hover:before { 
        color: #d13030;
        content: '\25B4';
        top: -1px;
      }
  
      /* ------------------ LANGUAGE DROPDOWN ------------------ */
  
       #language-dropdown {
        opacity: 0;
        width: 1023px;
        display: none;
        margin-top: 3px;
        left: 0;
        position: absolute;
        border: 1px solid #ddd;
        background: #fff;
        box-shadow: 0px 3px 3px #b3b3b3;
  
       }
  
       #language-dropdown h3 {
        color: #d13030;
        font-size: 14px;
        font-weight: normal;
        padding: 5px 15px 0px 15px;
       }
      #language-dropdown p {
  
        font-size: 12px;
        padding: 0px 0px 10px 15px;
      }
  
      #language-dropdown a {
        padding: 0px 0px 0px 15px;
      }
  
  
       .language-links {
        font-size: 12px;
        text-decoration: none;
        color: #2793e6;
       }
  
       .language-links:hover {
        text-decoration: underline;
  
       }
  </code></pre>