Bootstrap TreeView

by Faisal Pathan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="list-group list-group-tree well">

  <a href="javascript:void(0);" class="list-group-item" data-toggle="collapse">
    <i class="fa fa-chevron"></i>
    <span class="badge">12</span>
    Item 1
  </a>
  <div class="list-group collapse">

    <a href="javascript:void(0);" class="list-group-item" data-toggle="collapse">
      <i class="fa fa-chevron"></i>
      <span class="badge">3</span>
      Item 1.1
    </a>
    <div class="list-group collapse" >
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.1.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.1.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.1.3</a>
    </div>

    <a class="list-group-item" data-toggle="collapse">
      <i class="fa fa fa-chevron"></i>
      <span class="badge">3</span>
      Item 1.2
    </a>
    <div class="list-group collapse" >
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.2.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.2.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.2.3</a>
    </div>

    <a href="javascript:void(0);" class="list-group-item" data-toggle="collapse">
      <i class="fa fa fa-chevron"></i>
      <span class="badge">3</span>
      Item...

CSS

body {
  padding: 15px;
}



.list-group.list-group-tree {
  padding: 0;
}

.list-group.list-group-tree .list-group {
  margin-bottom: 0;
}

.list-group.list-group-tree > .list-group > .list-group-item {
  padding-left: 30px;
}
.list-group.list-group-tree > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}
.list-group.list-group-tree > .list-group > .list-group > .list-group-item > .list-group-item {
  padding-left: 60px;
}
.list-group.list-group-tree > .list-group > .list-group > .list-group-item > .list-group-item > .list-group-item {
  padding-left: 75px;
}
.list-group.list-group-tree > .list-group > .list-group > .list-group-item > .list-group-item > .list-group-item > .list-group-item {
  padding-left: 90px;
}






.list-group-item .fa {
  margin-right: 5px;
}

.fa-chevron:before {
      content: "\f054"; /*right*/
}
.in > .fa-chevron:before {
      content: "\f078"; /*down*/
}

JavaScript

$(function() {

// delegated handler
$(".list-group-tree").on('click', "[data-toggle=collapse]", function(){
  $(this).toggleClass('in')
	$(this).next(".list-group.collapse").collapse('toggle');
  
  // next up, when you click, dynamically load contents with ajax - THEN toggle
  return false;
})

});