title: simplifying a javascript click count menu controlling 3 individual dropdowns
body: <p>I've got 3 individual slide down menu's at the top of my page.</p>
  
  <ol>
  <li>Page Menu</li>
  <li>Account dropdown</li>
  <li>Cart Dropdown</li>
  </ol>
  
  <p>I've created individual open and close functions for each one </p>
  
  <pre><code>function menu_open(){ 
                  document.getElementById("myNav_overlay").style.height = "100%";
                  document.getElementById("myNav").style.height = "100%";
                  $('.menu-link').text("menu_open");
          }
  
     function menu_close() {
                  document.getElementById("myNav_overlay").style.height = "0%";
                  document.getElementById("myNav").style.height = "0%";
                  $('.menu-link').text("menu");
          }
  
          function account_open(){ 
                  document.getElementById("myAccount_overlay").style.height = "100%";
                  document.getElementById("myAccount").style.height = "100%";
                  $('.account-link').text("person");
          }
  
          function account_close() {
                  document.getElementById("myAccount_overlay").style.height = "0%";
                  document.getElementById("myAccount").style.height = "0%";
                  $('.account-link').text("person");
          }
  
          function cart_open(){ 
                  document.getElementById("myCart_overlay").style.height = "100%";
                  document.getElementById("myCart").style.height = "100%";
                  $('.cart-link').text("shopping_cart");
          }
  
          function cart_close() {
                  document.getElementById("myCart_overlay").style.height = "0%";
                  document.getElementById("myCart").style.height = "0%";
                  $('.cart-link').text("shopping_cart");
          }
  </code></pre>
  
  <p>and then 3 individual click count functions to determine if the menu needs to open or close. </p>
  
  <pre><code>    $(function() {  
      var menuclickCount = 0;
      var accountclickCount = 0;
      var cartclickCount = 0;
  
      $('.menu-link').click(function () {
          if(menuclickCount%2==0){
              //do when open
                menu_open();
                account_close();
                cart_close();
          }else{
               //do when closed
               menu_close();
           }
          clickCount++;
      });
  
      $('.account-link').click(function () {
          if(accountclickCount%2==0){
              //do when open
                account_open();
                menu_close();
                cart_close();
          }else{
               //do when closed
               account_close();
           }
          accountclickCount++;
      });
  
  
      $('.cart-link').click(function () {
          if(cartclickCount%2==0){
              //do when open
                cart_open();
                menu_close();
                account_close();
          }else{
               //do when closed
               cart_close();
           }
          cartclickCount++;
      });
  
  
  });
  </code></pre>
  
  <p>This seems rather large compared to what it has to be and seems like there may be a better/simpler way of doing it.  But honestly not sure how this would typically be done.  </p>
  
  <p><strong>Is it better to leave a setup like this as is where each one is controlled individually and manually closes the other? OR, is it better to combine these into a more robust, smaller function that still controls them as needed?</strong></p>
  
  <p><strong>If it is better to combine into a simpler function, how would this be done to where it still opens and closes each dropdown section?</strong></p>
  
  <p><em>I took 1 working function and duplicated it to make this work as is.  So now I'm curious to see how this compares to what is considered industry standard and practical.</em></p>
  
  <p>The HTML is simple....</p>
  
  <p><strong>Menu content</strong></p>
  
  <pre><code>&lt;div id="myNav_overlay" class="overlay_background"&gt;&lt;/div&gt;
  &lt;div id="myNav" class="nav-overlay"&gt;
  &lt;div class="overlay-content"&gt;
  MENU
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Account content</strong></p>
  
  <pre><code>&lt;div id="myAccount_overlay" class="overlay_background"&gt;&lt;/div&gt;
  &lt;div id="myAccount" class="account-overlay"&gt;
  &lt;div class="overlay-content"&gt;
  ACCOUNT
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Cart content</strong></p>
  
  <pre><code>&lt;div id="myCart_overlay" class="overlay_background"&gt;&lt;/div&gt;
  &lt;div id="myCart" class="cart-overlay"&gt;
  &lt;div class="overlay-content"&gt;
  CART
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>