# jQuery simpleTree

Yet another jQuery treeview plugin to display nested ULs as nice trees.

This plugin is based on a script and CSS for simple unobtrusive javascript treeview developed by Krijn Hoetmer:

http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/

Adapted as a jQuery plugin by Maurizio Manetti.

Live demo and examples: https://mauntrelio.github.io/demos/simpletree/

## Installation:

To be documented. You can figure out...

## Usage:

Include files from the dist folder:

```html
	<!-- Simple Tree core CSS file -->
	<link rel="stylesheet" href="css/simpletree.css">

	<!-- jQuery 1.9+ or Zepto.js 1.0+ -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	<!-- Simple Tree core JS file -->
	<script src="js/jquery.simpletree.min.js"></script>
```

Treeview initialization should be executed after document ready, for example:

```javascript
	$(document).ready(function() {
	  $('.tree').simpleTree({startCollapsed: false});
	});
```

The option `startCollapsed` is true by default.

Treeview can be applied programmatically:

```javascript
	$('#maketree').on('click',function(){
		$('#firstTree').simpleTree();
	});	
```

Treeview can be removed:

```javascript
	$('#destroytree').on('click',function(){
		$('#firstTree').simpleTree('destroy');
	});	
```

Please note that simpleTree is stateful: expanded and collapsed status of the nodes will be kept if you destroy and then re-apply treeview again. This is based on simpleTree specific classes (`.st-open` and `.st-collapsed`) defined in the CSS. 

This is also useful if you want to have a treeview partially opened by default: just give the class `.st-open` or `.st-collapsed` to the relevant List Item. Class given on the single LI element take precedence over the global startCollapsed option.

Treeview provides three basic methods in addition to `destroy`. 
Use the `expand` method to fully open a treeview:

```javascript
	$('#firstTree').simpleTree('expand');
```

Use the `collapse` method to completely close a treeview:

```javascript
	$('#firstTree').simpleTree('collapse');
```

If you need to dynamically add or remove elements to your list when the treeview is applied and you want to keep consistency, just call the `repaint` method immediately after adding or removing the element:

```javascript
	$('#firstTree').append('<li>Added item</li>');
	$('#firstTree').simpleTree('repaint');
```

Live demo and examples: https://mauntrelio.github.io/demos/simpletree/

## Alternatives:

There are plenties

- https://plugins.jquery.com/?s=treeview
- https://github.com/caerphoto/simpletreeview
- https://github.com/mar10/fancytree
- http://mbraak.github.io/jqTree/
- https://github.com/phoenixinobi/simpletree
- https://github.com/innoq/simpletree

## TODO:

- document installation
- themes (different icons / look)