Here is my html file.
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pimba na Bulita</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"/>
<!-- My custom Css -->
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />
<!-- TreeView -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap-treeview/dist/bootstrap-treeview.min.css">
</head>
<body>
<div class="col-md-6" align="center">
<span>List of Recent records</span>
<div id="tree"></div>
</div>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<!-- TreeView -->
<script src="./assets/bootstrap-treeview/dist/bootstrap-
treeview.min.js"></script>
</body>
And here is my js file where I initialize the bootstrap-treeview.
$(document).ready(function() {
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
$('#tree').treeview({data: tree});
});
As you guys can see below. The problem is: For some reason it's not possible to expanding/collapse the tree.
Detail: If I remove the css refenrece from the file. It does not make any difference !
Why is this happening and how to fix it?
The problem is in bootstrap version. As far as ive found out v4 is not supported.
To make your tree work change BS imports on v3:
I am now looking for BS v4 solution and digging in this: