JSFiddle - React, Tailwind, and code Playground
by robert_schutt
HTML
<script src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>
<div class="wrapper">
<h3>Financial Analysis</h3>
<ul id="browser" class="filetree">
<li><span class="folder">Finance Reports</span>
<ul>
<li><span class="folder">General Accounting </span>
<ul id="folder21">
<li><span class="file">Balance Sheet</span></li>
<li><span class="file">P & L</span></li>
</ul>
</li>
<li><span class="folder">Accounts Payable </span>
<ul id="folder21">
<li><span class="file">Balance Sheet</span></li>
<li><span class="file">Cash Flow</span></li>
<li><span class="file">Profit & Loss</span></li>
</ul>
</li>
<li><span class="folder">Fixed Assets </span>
<ul id="folder21">
<li><span class="file">Asset Register Report</span></li>
<li><span class="file">Asset Register Report Two</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="folder">Finance Analysis</span>
<ul>
<li><span class="folder">Regional Reports</span>
<ul id="folder21">
<li><span class="file">CF - Current Year Actual Trading</span></li>
<li><span class="file">CF - Current Year Period</span></li>
<li><span class="file">MCB - Current Year Actual Trading</span></li>
<li><span class="file">MCB - Current Year Period</span></li>
<li><span class="file">OCOS - Current Year Actual Trading</span></li>
<li><span class="file">OCOS - Current Year Period</span></li>
</ul>
</li>
<li><span class="folder">MOR</span>
<ul id="folder21">
<li><span class="file">MOR CF By Current Period</span></li>
<li><span class="file">MOR MCB By Current Period</span></li>
</ul>
</li>
<li><span class="folder">Other Region</span>
<ul id="folder21">
<li><span class="file">Other Region Report-1</span></li>
<li><span class="file">Other Region...
CSS
.wrapper {
display: inline-block;
width: 300px;
vertical-align: top;
}
JavaScript
$(document).ready(function(){
$(".filetree").treeview({
collapsed: true
});
});