Edit in JSFiddle

$(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;
})

});

<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 1.3
    </a>
    <div class="list-group collapse" >
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.3.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.3.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 1.3.3</a>
    </div>

  </div>

  <a class="list-group-item" data-toggle="collapse">
    <i class="fa fa fa-chevron"></i>Item 2
  </a>
  <div class="list-group collapse" >

    <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 2.1
    </a>
    <div class="list-group collapse" >
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.1.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.1.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.1.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 2.2
    </a>
    <div class="list-group collapse" >
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.2.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.2.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.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 2.3
    </a>
    <div class="list-group collapse" >
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.3.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.3.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 2.3.3</a>
    </div>

  </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 3
  </a>
  <div class="list-group collapse" >

    <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 3.1
    </a>
    <div class="list-group collapse" >
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.1.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.1.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.1.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 3.2
    </a>
    <div class="list-group collapse">
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.2.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.2.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.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 3.3
    </a>
    <div class="list-group collapse">
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.3.1</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.3.2</a>
      <a href="javascript:void(0);" class="list-group-item"><span class="badge">0</span>Item 3.3.3</a>
    </div>

  </div>

</div>















<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  About this SO Question:
  <a href='https://stackoverflow.com/a/33571268/1366033'>
    Consistent Styling for Nested Lists with Bootstrap
  </a>
</div>

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*/
}