JSFiddle - React, Tailwind, and code Playground

by davidliang2008

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/32px.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/40px.png"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/throbber.gif"></script>
<div class="container">
	<div class="tree-menu">
		<ul class="menu">
			<li id="node_1">
				Node 1 - Level 1
				<ul class="menu">
					<li id="node_3">
						Node 3 - Level 2
					</li>
				</ul>
			</li>
			<li id="node_2">
				Node 2 - Level 1
			</li>
		</ul>
	</div>

	<a href="#" id="btn-select" class="btn btn-success btn-sm">
		Select Node 3 - Level 2
	</a>
</div>

CSS

body {
	margin-top: 2rem;
}

.tree-menu {
	margin-bottom: 2rem;
}

JavaScript

$(function() {
	$('.tree-menu').jstree({
		core: {
			animation: 60,
			themes: {
				icons: false,
				responsive: false
			}
		},
		search: {
			fuzzy: false
		},
		plugins: ['search']
	});

	$('#btn-select').click(function(){
		$('.tree-menu')
			.jstree(true)
			.select_node("node_3");

		return false;
	});
});