title: Dropdown header from hover to click
body: <p>I use this code inside our header to display our cart.
  Currently the dropdown is displayed on hover.</p>
  
  <p>How can I modify this so that the dropdown is displayed <code>onclick</code>?</p>
  
  <pre><code>&lt;a href="#header-cart" class="skip-link skip-cart &lt;?php if($_cartQty &lt;= 0): ?&gt; no-count&lt;?php endif; ?&gt;"&gt;
      &lt;span class="icon"&gt;&lt;/span&gt;
      &lt;span class="label"&gt;&lt;?php echo $this-&gt;__('Cart'); ?&gt;&lt;/span&gt;
      &lt;span class="count"&gt;&lt;?php echo $_cartQty; ?&gt;&lt;/span&gt;
  &lt;/a&gt;
  
  &lt;div id="header-cart" class="block block-cart skip-content"&gt;
      &lt;?php echo $this-&gt;getChildHtml('minicart_content');?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I use this code for the dropdown on the website:</p>
  
  <pre><code>    &lt;?php //Drop-down ?&gt;
      var ddOpenTimeout;
      var dMenuPosTimeout;
      var DD_DELAY_IN = 200;
      var DD_DELAY_OUT = 0;
      var DD_ANIMATION_IN = 0;
      var DD_ANIMATION_OUT = 0;
  
      $('.clickable-dropdown &gt; .dropdown-heading').click(function() {
          $(this).parent().addClass('open');
          $(this).parent().trigger('mouseenter');
      });
  
      //$('.dropdown-heading').on('click', function(e) {
      $(document).on('click', '.dropdown-heading', function(e) {
          e.preventDefault();
      });
  
      $(document).on('mouseenter', '.dropdown', function() {
  
          var ddToggle = $(this).children('.dropdown-heading');
          var ddMenu = $(this).children('.dropdown-content');
          var ddWrapper = ddMenu.parent(); &lt;?php //$(this); ?&gt;
  
          &lt;?php //Clear old position of dd menu ?&gt;
          ddMenu.css("left", "");
          ddMenu.css("right", "");
  
          &lt;?php //Show dd menu ?&gt;
          if ($(this).hasClass('clickable-dropdown'))
          {
              &lt;?php //If dropdown is opened (parent already has class 'open') ?&gt;
              if ($(this).hasClass('open'))
              {
                  $(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
              }
          }
          else
          {
              &lt;?php //Add class 'open' to dd ?&gt;
              clearTimeout(ddOpenTimeout);
              ddOpenTimeout = setTimeout(function() {
  
                  ddWrapper.addClass('open');
  
              }, DD_DELAY_IN);
  
              //$(this).addClass('open');
              $(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
          }
  
          &lt;?php //Set new position of dd menu.
                //This code is delayed the same amount of time as drop-down animation. ?&gt;
          clearTimeout(dMenuPosTimeout);
          dMenuPosTimeout = setTimeout(function() {
  
              if (ddMenu.offset().left &lt; 0)
              {
                  var space = ddWrapper.offset().left; &lt;?php //Space available on the left of dd ?&gt;
                  ddMenu.css("left", (-1)*space);
                  ddMenu.css("right", "auto");
              }
  
          }, DD_DELAY_IN);
  
      }).on('mouseleave', '.dropdown', function() {
  
          var ddMenu = $(this).children('.dropdown-content');
          clearTimeout(ddOpenTimeout); &lt;?php //Clear, to close dd on mouseleave ?&gt;
          ddMenu.stop(true, true).delay(DD_DELAY_OUT).fadeOut(DD_ANIMATION_OUT, "easeInCubic");
          if (ddMenu.is(":hidden"))
          {
              ddMenu.hide();
          }
          $(this).removeClass('open');
      });
  </code></pre>