SimpleTreejs

SimpleTreejs is a very very simple jQuery plugin that allows you to create "file folder"-like behavior from nested lists.

There are many other jQuery plugins that create toggleable trees, but I found them too complex for straightforward use.

Download See on Github

Demo

Click the icons to toggle the lists:

  • Item 1
    • Item 1 - 1
      • Item 1 - 1 - 3
    • Item 1 - 2
  • Item 2
    • Item 2 - 1
    • Item 2 - 2
  • Item 3
  • Item 4

Usage

<div id="sample">
	<ul class="parent">
		<li><a href="#" class="toggle"><i class="icon-chevron-right"></i></a> Item 1
		    	<ul class="child">
				<li><a href="#" class="toggle"><i class="icon-chevron-right"></i></a> Item 1 - 1
					<ul class="child">
						<li>
							Item 1 - 1 - 3
						</li>
					</ul>					
				</li>
				<li>Item 1 - 2</li>
			</ul>
		</li>
		<li><a href="#" class="toggle"><i class="icon-chevron-right"></i></a> Item 2
			<ul class="child">
				<li>Item 2 - 1</li>
				<li>Item 2 - 2</li>
			</ul>
		</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</div>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/simple-tree.js"></script>
<script type="text/javascript">
	$("#sample").simpletree();
</script>

Getting Started

First and foremost, simpleTree requires jQuery. It also works on dynamically added lists (thanks to a pull request from sydcanem)

Refer to the "Usage" part above for the tree structure:

  • The top-most list (ul element) has the parent class
  • Make sure that child lists are inside the li elements.
  • If a li element has a child list in it that you wish to toggle - create an element inside that li element and assign a toggle class in that element. This makes it the open/close toggle for that child list.
  • Whenever a toggle element is clicked, it is assigned a css class called closed. Go crazy on the styles of your toggle.

After constructing the nested lists, place them in a container. Call simpletree on that container in javascript.