JSFiddle - React, Tailwind, and code Playground

by plaliberte

HTML

<script src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<fieldset>
    <legend>Categories/Sets</legend>
<div id='tree'>
    <ul>
        <li>
            <a href='#' id='signal'>Signal</a>
        </li>
        <li>
            <a href='#' id='goal'>Goal</a>
        </li>
        <li>
            <a href='#' id='action'>Action</a>
        </li>
        <li>
            <a href='#' id='person'>Person</a>
            <ul>
                <li><a href="#">Audience</a></li>
                <li><a href="#">Org Chart</a></li>
            </ul>
        </li>
        <li>
            <a href='#'>Information</a>
        </li>
        <li>
            <a href='#' id='technology'>Technology</a>
            <ul>
                <li><a href="#">Media</a></li>
            </ul>
        </li>
        <li>
            <a href='#'>Place</a>
        </li>
        <li>
            <a href='#'>Result</a>
        </li>
        <li>
            <a href='#'>Measure</a>
        </li>
    </ul>
</div></fieldset>
<fieldset>
    <legend>Views</legend>
<div id='views'>
    <ul>
        <li>
            <a href='#'>Drilling in Ottawa</a>
        </li>
        <li>
            <a href='#'>Drilling in Sewanee</a>
        </li>
        <li>
            <a href='#'>Drilling in Spokane</a>
        </li>
    </ul>
    </div>
</fieldset>

CSS

fieldset
  {
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 7px;
    -webkit-border-radius: 7px;
    border-radius: 3px;
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
  }

  legend
  {
    color: #696969;
  }

JavaScript

// jsTree prototyping
$(document).ready(function() {

    $('#tree').jstree({
        "plugins": ["themes", "html_data", "checkbox", 'ui'],
        core: {
            initially_open: ['person', 'technology']
        }
    });
    
        $('#views').jstree({
        "plugins": ["themes", "html_data", "checkbox", 'ui'],
        core: {
            initially_open: ['person', 'technology']
        }
    });




});