I'm in search of a way to integrate the following code snippet as a JSTree into the heading section of a webpage, depicted below:
<div id="jstree">
<ul>
<li>Core 1
<ul>
<li id="child_node_1">Trigonometry</li>
<li>Child node 2</li>
</ul>
</li>
<li>Core 2</li>
</ul>
</div>
<button>demo button</button>
<script src="oi/dist/libs/jquery.js"></script>
<script src="oi/dist/jstree.min.js"></script>
<script>
$(function () {
$('#jstree').jstree();
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
Here is an example visual representation of where I want to place it: My Heading
Nevertheless, when including the code, it shows up only as text, not rendering properly as a folder structure within the HTML heading. What adjustments can be made to display it correctly?
HTML Code:
... (The rest of the content remains unchanged)