Checkable And Collapsible jQuery Tree View Plugin - Treeview

File Size: 6.21 KB
Views Total: 7722
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Checkable And Collapsible jQuery Tree View Plugin - Treeview

Yet another jQuery tree view plugin which converts a nested html list into an animated, collapsible tree structure with support for checkboxes and auto expanding.

How to use it:

1. Include the required Font Awesome 4 and Bootstrap's stylehsheet in the head section of your webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/bfont-awesome.min.css">

2. Create a basic tree view from nested html lists as follows:

<div id="treeview-container">
    <li>Item 1</li>
    <li>Item 2
        <li>Item 2.1</li>
        <li>Item 2.2
            <li data-value="2.2.1">Item 2.2.1</li>
            <li data-value="2.2.2">Item 2.2.2</li>
            <li data-value="2.2.3">Item 2.2.3</li>
          <li>Item 2.3</li>
    <li>Item 3
        <li data-value="3.1">Item 3.1</li>
        <li data-value="3.2">Item 3.2</li>

3. Include jQuery library and other required resources at the bottom of the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="src/logger.min.js"></script>
<script src="src/treeview.min.js"></script>

4. Initialize the plugin and specify the pre-checked values.

  data : ['3.2', '2.2.3']

5. Output the selected values.


This awesome jQuery plugin is developed by javiertrejo. For more Advanced Usages, please check the demo page or visit the official website.