Untitled

dabblet.css

.tree, .branches {
	list-style: none;
}

.is-collapsed .branches {
	display: none;
}
.is-expanded .branches {
	display: block;
}

.folder.is-expanded .folder-name:before {
	content: '-';
}
.folder.is-collapsed .folder-name:before {
	content: '+';
}

dabblet.html

<ul class="tree">
	<li class="folder is-expanded">
		<span class="folder-name">First Folder</span>
		
		<ul class="branches">
			<li class="file">File one</li>
		</ul>
	</li>
	<li class="folder is-collapsed">
    	<span class="folder-name">My Folder</span>
    
    	<ul class="branches">
		<li class="file">Some file</li>
		<li class="folder">
			<span class="folder-name">Sub-folder</span>
			<!-- empty folder -->
      	</li>
	</ul>
</li>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}