title: Jquery: programmatically trigger click event on mega-dropdown
body: <p>I want to programmatically trigger a click event on a mega-dropdown when a button is clicked. I have tried the following but did not work.</p>
  
  <p>MEGA-DROPDOWN HTML CODE</p>
  
  <pre><code>&lt;li class="nav-item dropdown mega-dropdown"&gt;
    &lt;a class="nav-link dropdown-toggle waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false"&gt;
      &lt;i class="ti-layers-alt"&gt;&lt;/i&gt;
  
      &lt;div class="notify"&gt; &lt;span class="heartbit"&gt;&lt;/span&gt; &lt;span class="point"&gt;&lt;/span&gt; &lt;/div&gt;
  
    &lt;/a&gt;
    &lt;div class="dropdown-menu animated bounceInDown"&gt;
      &lt;ul class="mega-dropdown-menu row"&gt;
  
        &lt;li class="col-lg-12 col-md-12"&gt;
  
          &lt;center&gt;
            &lt;h2&gt;Message Subject&lt;/h2&gt;
          &lt;/center&gt;
          &lt;center&gt;
            &lt;h4&gt;Message Body&lt;/h4&gt;
          &lt;/center&gt;
  
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <pre><code>&lt;button type="button" onclick="showMegaDropDown()" &gt;Show Mega Dropdown&lt;/button&gt;
  </code></pre>
  
  <p>JavaScript Code</p>
  
  <pre><code>showMegaDropDown(){
    $(".mega-dropdown").trigger('click');
    return;
  }
  
  </code></pre>