An ultra-lightweight tree/accordion plugin for HTML lists.
This project is maintained by Tamer Aydın.
jQuery Sapling provides you a base CSS & JavaScript code in order to help you to create your own customized tree/accordion lists very quickly.
It doesn't offer any complex functionality, on the contrary, it is simple (Just 1.6 KB) and its visual richness is up to how you customized its CSS. If you've looked for more competent plugins, you may check jQuery Treeview (8,1 KB), jsTree (180 KB) and of course jQuery UI.
Download manually or install via Bower:
bower install sapling
Add jQuery (Requires jQuery 1.4.2 or later) and plugin assets into the <head> element:
<link href="jquery.sapling.css" rel="stylesheet">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.sapling.min.js" type="text/javascript"></script>
Place your lists (<ul>, <ol>) in the HTML: (Please note that the Definition lists (<dl>) are not supported due to its different markup)
<ul id="myList">
<li>This is first item</li>
<li>This item has a sub list
<ul>
<li>First sub item</li>
<li>Second sub item</li>
</ul>
</li>
</ul>
Simply select your list and call sapling() function when the DOM is ready:
$(document).ready(function() {
$("#myList").sapling();
});
| Property | Default | Description |
|---|---|---|
| multiexpand | true | Allow multiple items to expand. If false, only one item will be expanded at a time. (true, false) |
| animation | false | Animation effect on expand/collapse. Suggested to be used for accordion-style lists. (true, false) |
Sample usage:
$('#myList').sapling({
multiexpand: false,
animation: true
});
| Name | Description |
|---|---|
| expand() | Expands all items on a list. |
| collapse() | Collapses all items on a list. |
Sample usage:
$('#myList').data('sapling').expand();
Tested successfully on IE7+, FF 3.6+, Chrome 23, Safari 5.1, Opera 12. Please report if you have any issues with it.