<div class="am-dropdown" data-am-dropdown>
  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>Dropdown <span class="am-icon-caret-down"></span></button>
  <ul class="am-dropdown-content">
    <li class="am-dropdown-header">Title</li>
        <li><a href="#">Devouring Time,blunt thou the lion'paws,</a></li>
        <li class="am-active"><a href="#">And make the earth devour her own sweet brood;</a></li>
        <li><a href="#">Pluck the keen teeth from the fierce tiger's jaws,</a></li>
        <li class="am-disabled"><a href="#">And burn the long--liv'd phoenix in her blood;</a></li>
        <li class="am-divider"></li>
        <li><a href="#">Make glad and sorry seasons as thou fleets,</a></li>
  </ul>
</div>

<div class="am-dropdown am-dropdown-up" data-am-dropdown>
  <button class="am-btn am-btn-danger am-dropdown-toggle" data-am-dropdown-toggle>Pullup <span class="am-icon-caret-up"></span></button>
  <ul class="am-dropdown-content">
    <li class="am-dropdown-header">Title</li>
        <li><a href="#">Devouring Time,blunt thou the lion'paws,</a></li>
        <li class="am-active"><a href="#">And make the earth devour her own sweet brood;</a></li>
        <li><a href="#">Pluck the keen teeth from the fierce tiger's jaws,</a></li>
        <li class="am-disabled"><a href="#">And burn the long--liv'd phoenix in her blood;</a></li>
        <li class="am-divider"></li>
        <li><a href="#">Make glad and sorry seasons as thou fleets,</a></li>
  </ul>
</div>

<div class="am-dropdown" data-am-dropdown>
  <button class="am-btn am-btn-success am-dropdown-toggle">Dropdown contents <span class="am-icon-caret-down"></span></button>
  <div class="am-dropdown-content">
    <h2>Hope Is the Thing with Feathers</h2>
    <p>
      Hope is the thing with feathers
      That perches in the soul,
      And sings the tune without the words,
      And never stops at all.
      And sweetest in the gale is heard;
      And sore must be the storm
      That could abash the little bird
      That kept so many warm.
      I’ve heard it in the chillest land,
      And on the strangest sea;
      Yet, never, in extremity,
      It asked a crumb of me.
    </p>
  </div>
</div>

<div id="doc-dropdown-justify">
  <div class="am-dropdown" data-am-dropdown="{justify: '#doc-dropdown-justify'}">
    <button class="am-btn am-btn-success am-dropdown-toggle">Width Justifying <span class="am-icon-caret-down"></span></button>
    <div class="am-dropdown-content">
      <h2>Hope Is the Thing with Feathers</h2>
      <p>
        Hope is the thing with feathers
        That perches in the soul,
        And sings the tune without the words,
        And never stops at all.
        And sweetest in the gale is heard;
        And sore must be the storm
        That could abash the little bird
        That kept so many warm.
        I’ve heard it in the chillest land,
        And on the strangest sea;
        Yet, never, in extremity,
        It asked a crumb of me.
      </p>
    </div>
  </div>
</div>

<div id="doc-dropdown-justify-js" style="width: 400px">
  <div class="am-dropdown" id="doc-dropdown-js">
    <button class="am-btn am-btn-danger am-dropdown-toggle">Using JS <span class="am-icon-caret-down"></span></button>
    <div class="am-dropdown-content">...</div>
  </div>
</div>
<script>
  $(function() {
    $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'});
  });
</script>

<button class="am-btn am-btn-secondary" id="doc-dropdown-toggle">Toggle</button>
<button class="am-btn am-btn-success" id="doc-dropdown-open">Open</button>
<button class="am-btn am-btn-warning" id="doc-dropdown-close">Close</button>
<script>
  $(function() {
    var $dropdown = $('#doc-dropdown-js'),
        data = $dropdown.data('amui.dropdown');
    $('#doc-dropdown-toggle').on('click', function(e) {
      scrollToDropdown();
      $dropdown.dropdown('toggle');
      return false;
    });

    $('#doc-dropdown-open').on('click', function(e) {
      scrollToDropdown();
      data.active ? alert('Dropdown has been opened') : $dropdown.dropdown('open');
      return false;
    });

    $('#doc-dropdown-close').on('click', function(e) {
      scrollToDropdown();
      data.active ? $dropdown.dropdown('close') : alert('Dropdown has been closed');
      return false;
    });

    $dropdown.on('open.dropdown.amui', function (e) {
      console.log('open event triggered');
    });
  });
</script>

$(function() {
  $dropdown.on('open.dropdown.amui', function (e) {
    console.log('open event triggered');
  });
});