One button

by cillay

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<div class="expert">
  <div>
    <button id="btnMerge">Merge Clients</button>
    <button>&nbsp;</button>
  </div>
  <ul>
    <li><a id="lnkPreview" href="#">Preview Merge</a></li>
  </ul>
</div>

<p>OR</p>

<div class="basic">
  <div>
    <button id="btnPreview">Preview Merge</button>
    <button>&nbsp;</button>
  </div>
  <ul>
    <li><a id="lnkMerge" href="#">Merge without Preview</a></li>
  </ul>
</div>

CSS

.ui-menu { position: absolute; }

.basic .ui-menu { width: 225px; }

.expert .ui-menu { width: 150px; }

JavaScript

$(function() {
    $( "#btnMerge" )
      .button()
      .click(function() {
        alert( "Merging Clients" );
      })
      .next()
        .button({
          text: false,
          icons: {
            primary: "ui-icon-triangle-1-s"
          }
        })
        .click(function() {
          var menu = $( this ).parent().next().show().position({
            my: "left top",
            at: "left bottom",
            of: this
          });
          $( document ).on( "click", function() {
            menu.hide();
          });
          return false;
        })
        .parent()
          .buttonset()
          .next()
            .hide()
            .menu();
    $( "#lnkPreview" )
      .click(function() {
        alert( "Previewing Merge" );
      })
  });

  $(function() {
    $( "#btnPreview" )
      .button()
      .click(function() {
        alert( "Previewing Merge" );
      })
      .next()
        .button({
          text: false,
          icons: {
            primary: "ui-icon-triangle-1-s"
          }
        })
        .click(function() {
          var menu = $( this ).parent().next().show().position({
            my: "left top",
            at: "left bottom",
            of: this
          });
          $( document ).on( "click", function() {
            menu.hide();
          });
          return false;
        })
        .parent()
          .buttonset()
          .next()
            .hide()
            .menu();
    $( "#lnkMerge" )
      .click(function() {
        alert( "Merging Clients" );
      })
  });