Jquery Orgchart- Display all nodes one by one with slide down animation after page load completed

92 Views Asked by At

I want to display all nodes one by one with expanding animation after page load completes.

https://www.jqueryscript.net/demo/Fully-Customizable-Organisational-Chart-Plugin-With-jQuery-OrgChart/

I tried this way but not working.

var oc = $('#chart-container').orgchart({
  'data': datascource,
  'depth': 1,
  'nodeTitle': 'name',
  'nodeContent': 'title',
  'nodeID': 'id',
  'createNode': function($node, data) {
    var nodePrompt = $('<i>', {
      'class': 'fa fa-info-circle second-menu-icon',
      click: function() {
        $(this).siblings('.second-menu').toggle();
      }
    });
    var secondMenu = '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
    $node.append(nodePrompt).append(secondMenu);
  },
  'direction': 'b2t'
});


oc.$chart.find('.node').each("pageload", function() {
  oc.showChildren($(this));
});
0

There are 0 best solutions below