JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/css/custom.css">
<link rel="stylesheet" href="http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/css/prettify.css">
<script src="http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/prettify.js"></script>
<link rel="stylesheet" href="http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/css/jquery.jOrgChart.css">
<script src="https://github.com/norbdum/jOrgChart/raw/master/jquery.jOrgChart.js"></script>
<body>
<div id='left'>
<ul id="org" style="display:none">
<li>Food
<ul>
<li >Beer</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Bread1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="chart" class="orgChart"></div>
<script>
jQuery(document).ready(function() {
/* Custom jQuery for the example */
$("#show-list").click(function(e) {
e.preventDefault();
$('#list-html').toggle('fast', function() {
if ($(this).is(':visible')) {
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast', 0.9);
} else {
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast', 1);
}
});
});
$('#list-html').text($('#org').html());
$("#org").bind("DOMSubtreeModified", function() {
...
JavaScript
jQuery(document).ready(function () {
$("#org").jOrgChart({
chartElement: '#chart',
dragAndDrop: true
});
});