title: OnClick -Dropdown Menu
body: <p>I have a bit Javascript, which controls the drop down menu when it is on click</p>
  
  <pre><code>&lt;script&gt;
  function show_menu(){
      var menu = document.getElementById('dropdown_menu');
  
      if(menu.style.display == 'block'){
          menu.style.display = 'none';
      }else {
          menu.style.display = 'block';                    
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is HTML</p>
  
  <pre><code>&lt;nav&gt;
      &lt;div class="dropdown_button" class="menu_button" onClick="show_menu()"&gt;Schedule 1&lt;/div&gt;
      &lt;div id="dropdown_menu" class="hidden_menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;option 1&lt;/li&gt;
              &lt;li&gt;option 2&lt;/li&gt;
          &lt;/ul&gt;           
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is a style</p>
  
  <pre><code>&lt;style&gt;
  .hidden_menu{display:none}
  &lt;/style&gt;
  </code></pre>
  
  <p>Everything works fine so far, but if I add one more dropdown set into the menu bar, they don't work because ID="dropdown_menu" is for only one element, not for another one.</p>
  
  <pre><code>&lt;nav&gt;
          &lt;div class="dropdown_button" class="menu_button" onClick="show_menu()"&gt;Schedule 1&lt;/div&gt;
          &lt;div id="dropdown_menu" class="hidden_menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;option 1&lt;/li&gt;
                  &lt;li&gt;option 2&lt;/li&gt;
              &lt;/ul&gt;           
          &lt;/div&gt;
  
  &lt;div class="dropdown_button" class="menu_button" onClick="show_menu()"&gt;Schedule 2&lt;/div&gt;
          &lt;div id="dropdown_menu" class="hidden_menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;option 3&lt;/li&gt;
                  &lt;li&gt;option 4&lt;/li&gt;
              &lt;/ul&gt;           
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>How can I solve this problem? please give me a hand.
  Thanks</p>