JSFiddle - React, Tailwind, and code Playground

by redoak2000

HTML

<script src="http://wwwendt.de/tech/dynatree/jquery/jquery-ui.custom.js"></script>
<script src="http://wwwendt.de/tech/dynatree/jquery/jquery.cookie.js"></script>
<link rel="stylesheet" href="http://wwwendt.de/tech/dynatree/src/skin/ui.dynatree.css">
<script src="http://wwwendt.de/tech/dynatree/src/jquery.dynatree.js"></script>
  <div style="width: 500px;">
      <div>
        <input readonly="true" type="text" id="displayText" style="float:left;width:470px"/>
        <input type="button" id="opener" style="width:24px" value="&darr;"/>
      </div>
      <div style="display:none" id="tree3"></div>
    </div>

JavaScript

var treeData = [
      {title: "England", key: "England", expand: true,
        children: [
          {title: "Region", key: "Region", activate: true, expand:true,
            children: [
              {title: "London", key: "London" },
              {title: "Leeds", key: "Leeds" }
            ]
          }
        ]
      }
    ];
    $(function(){
      $("#tree3").dynatree({
        checkbox: true,
        selectMode: 3,
        children: treeData,
        onSelect: function(select, node) {
          // Get a list of all selected nodes, and convert to a key array:
          var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
            return node.data.key;
          });
          $("#displayText").val(selKeys.join(", "));
        },
        onDblClick: function(node, event) {
          node.toggleSelect();
        },
        onKeydown: function(node, event) {
          if( event.which == 32 ) {
            node.toggleSelect();
            return false;
          }
        },
      });

      $("#opener").click(function() {
         var tree = $("#tree3");
         if (tree.css("display") == "none")
         {
            tree.css("display", "block") 
         } else {
            tree.css("display", "none");
         }
      });
  });