JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<script src="http://codesearch.corp.yahoo.com/"></script>
<script src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>
<div id="main">
	
	<a href="demo.js">Pagecode</a>
	
	<h3>Other demos</h3>
	<ul>
		<li><a href="large.html">Large Tree Demo</a></li>
		<li><a href="prerendered.html">Prerendered Large Tree Demo</a></li>
		<li><a href="async.html">Async Tree Demo</a></li>
		<li><a href="edit.html">Editable Tree Demo</a></li>
		<li><a href="simple.html">Simple Tree Demo, famfamfam theme (no lines)</a></li>
	</ul>
	
	<h4>Sample 1 - default</h4>
	<ul id="browser" class="filetree treeview">
		<li class="collapsable"><div class="hitarea collapsable-hitarea"></div><span class="folder">Folder 1</span>
			<ul>
				<li class="last"><span class="file">Item 1.1</span></li>
			</ul>
		</li>
		<li class="collapsable"><div class="hitarea collapsable-hitarea"></div><span class="folder">Folder 2</span>
			<ul>
				<li class="collapsable"><div class="hitarea collapsable-hitarea"></div><span class="folder">Subfolder 2.1</span>
					<ul id="folder21">
						<li><span class="file">File 2.1.1</span></li>
						<li class="last"><span class="file">File 2.1.2</span></li>
					</ul>
				</li>
				<li class="last"><span class="file">File 2.2</span></li>
			</ul>
		</li>
		<li class="closed expandable"><div class="hitarea closed-hitarea expandable-hitarea"></div><span class="folder">Folder 3 (closed at start)</span>
			<ul style="display: none;">
				<li class="last"><span class="file">File 3.1</span></li>
			</ul>
		</li>
		<li class="last"><span class="file">File 4</span></li>
	</ul>
		
	<h4>Sample 2 - Navigation</h4>
	
	<ul id="navigation" class="treeview">
		<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="?1">Item 1</a>
			<ul style="display: none;">
				<li class="expandable"><div class="hitarea expandable-hitarea"></div><a href="?1.0">Item 1.0</a>
					<ul style="display: none;">
						<li class="last"><a href="?1.0.0">Item...

CSS

.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}

.treeview ul {
	background-color: white;
	margin-top: 4px;
}

.treeview .hitarea {
	background: url(http://jquery.bassistance.de/treeview/images/treeview-default.gif) -64px -25px no-repeat;
	height: 16px;
	width: 16px;
	margin-left: -16px;
	float: left;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
	display: inline;
	float:none;
}

.treeview li { 
	margin: 0;
	padding: 3px 0pt 3px 16px;
}

.treeview a.selected {
	background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(http://jquery.bassistance.de/treeview/images/treeview-default.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(http://jquery.bassistance.de/treeview/images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 

.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  

.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image:...

JavaScript

// first example
	$("#browser").treeview();
	
	// second example
	$("#navigation").treeview({
		persist: "location",
		collapsed: true,
		unique: true
	});
	
	// third example
	$("#red").treeview({
		animated: "fast",
		collapsed: true,
		unique: true,
		persist: "cookie",
		toggle: function() {
			window.console && console.log("%o was toggled", this);
		}
	});
	
	// fourth example
	$("#black, #gray").treeview({
		control: "#treecontrol",
		persist: "cookie",
		cookieId: "treeview-black"
	});