Dynamic Collapsible Tree View For Bootstrap 5

This is the upgraded version of the jQuery BSTreeView plugin that enables you to create a dynamic, collapsible/expandable tree view with the latest Bootstrap 5 framework.

It can be useful in presenting your complex data in a human-readable hierarchical tree structure.

How to use it:

1. Load both jQuery library and Bootstrap 5 framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Load the minified version of the bstreeview plugin.

<link href="dist/css/bstreeview.min.css" rel="stylesheet" />
<script src="dist/js/bstreeview.min.js"></script>

3. Create an empty DIV container to hold the tree view.

<div id="tree">
</div>

4. Prepare your data in an array of JS objects as follows. All possible properties:

• id: Unique Node ID
• text: Node text
• icon: Icon CSS class(es)
• href: Valid URL
• class: Additional CSS class(es)

var treeData = [
    {
      text: "Node 1",
      expanded: true,
      icon: "fa fa-folder", // requires font awesome
      nodes: [
        {
          text: "Sub Node 1",
          icon: "fa fa-folder",
          nodes: [
            {
              id:    "sub-node-1",
              text:  "Sub Child Node 1",
              icon:  "fa fa-folder",
              class: "nav-level-3",
              href:  "https://jqueryscript.net"
            },
            {
              text: "Sub Child Node 2",
              icon: "fa fa-folder"
            }
          ]
        },
        {
          text: "Sub Node 2",
           icon: "fa fa-folder"
        }
      ]
    },
    {
      text: "Node 2",
      icon: "fa fa-folder"
    },
    {
      text: "Node 3",
      icon: "fa fa-folder"
    },
    {
      text: "Node 4",
      icon: "fa fa-folder"
    },
    {
      text: "Node 5",
      icon: "fa fa-folder"
    }
];

5. Generate a basic tree view from the data you provide.

$('#tree').bstreeview({ 
  data: treeData
});

6. Override the default expand/collapse icon classes.

$('#tree').bstreeview({ 
  expandIcon: 'fa fa-angle-down',
  collapseIcon: 'fa fa-angle-right'
});

7. Specify the indentation of child nodes. Default: 1.25.

$('#tree').bstreeview({ 
  indent: 2
});

8. Set the margin area on the left side of parent nodes. Default: '1.25rem'.

$('#tree').bstreeview({ 
  parentsMarginLeft: '1.25rem'
});

9. Determine whether to open the link in a new tab. Default: true.

$('#tree').bstreeview({ 
  openNodeLinkOnNewTab: false
});

Changelog:

2022-03-31

• add an optional attribute "expanded" to node

---

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