$(document).ready(function(){
  
  // Create an instance of orgBuilder within the target element(s). 
  // If $elem represents multiple elements, orgBuilder will be instantiated within each one.
  // Use the stackLayout option to turn off stacking of leaf nodes.
  var $elem = $('#orgchart');
  $elem.orgBuilder({ 'stackLayout': false });

  // Define a click function which toggles whether leaf nodes are stacked vertically or horizontally.
  // All nodes will be minimized and then re-expanded with the new stack setting.
  $('#toggle').click(function(){

    // opts.stackLeaves is a boolean so setting with its inverse will toggle on/off.
    opts.stackLeaves = !opts.stackLeaves;
    
    // Define a function to execute when re-expand animation completes.
    var connectEm = function(){
      $elem.orgBuilder( 'connectNodes' );
    };
    // Define a function to execute when minimize animation completes.
    var whenDone = function() {
      // The collectStack method applies the 'stacked' class to leaf nodes which removes the float property to stack nodes vertically.
      $elem.orgBuilder( 'collectStack' );
      // The showNode method re-expands all specified nodes before calling the function to redraw connectors.
      $elem.orgBuilder( 'showNode', $open, null, connectEm );
    };
    // Store all nodes which are not minimized in a global variable
    $open = $( '.node' ).not( '.min' );
    // Remove connectors
    $( '.connect' ).remove();
    // The hideDescendents method minimizes all descendents of the specified node before calling the function provided.
    // The last parameter prevents the method from automatically redrawing connectors when it completes. 
    $elem.orgBuilder( 'hideDescendents', $elem.find( '#root' ).children( '.node' ), whenDone, false );
  });
  
});