Bootstrap 4 Update
I wanted to be able to use this with bootstrap 4. Hope this helps someone else.
Here is the code using font awesome (since glyphicons are not supported in V4).
Working jfiddle
Html
<div class="just-padding">
<div class="list-group list-group-root card">
<a href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i></i>Item 1
</a>
<div class="list-group collapse" id="item-1">
<a href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 1.1
</a>
<div class="list-group collapse" id="item-1-1">
<a href="#" class="list-group-item">Item 1.1.1</a>
<a href="#" class="list-group-item">Item 1.1.2</a>
<a href="#" class="list-group-item">Item 1.1.3</a>
</div>
<a href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 1.2
</a>
<div class="list-group collapse" id="item-1-2">
<a href="#" class="list-group-item">Item 1.2.1</a>
<a href="#" class="list-group-item">Item 1.2.2</a>
<a href="#" class="list-group-item">Item 1.2.3</a>
</div>
<a href="#item-1-3" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 1.3
</a>
<div class="list-group collapse" id="item-1-3">
<a href="#" class="list-group-item">Item 1.3.1</a>
<a href="#" class="list-group-item">Item 1.3.2</a>
<a href="#" class="list-group-item">Item 1.3.3</a>
</div>
</div>
<a href="#item-2" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 2
</a>
<div class="list-group collapse" id="item-2">
<a href="#item-2-1" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 2.1
</a>
<div class="list-group collapse" id="item-2-1">
<a href="#" class="list-group-item">Item 2.1.1</a>
<a href="#" class="list-group-item">Item 2.1.2</a>
<a href="#" class="list-group-item">Item 2.1.3</a>
</div>
<a href="#item-2-2" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 2.2
</a>
<div class="list-group collapse" id="item-2-2">
<a href="#" class="list-group-item">Item 2.2.1</a>
<a href="#" class="list-group-item">Item 2.2.2</a>
<a href="#" class="list-group-item">Item 2.2.3</a>
</div>
<a href="#item-2-3" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 2.3
</a>
<div class="list-group collapse" id="item-2-3">
<a href="#" class="list-group-item">Item 2.3.1</a>
<a href="#" class="list-group-item">Item 2.3.2</a>
<a href="#" class="list-group-item">Item 2.3.3</a>
</div>
</div>
<a href="#item-3" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 3
</a>
<div class="list-group collapse" id="item-3">
<a href="#item-3-1" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 3.1
</a>
<div class="list-group collapse" id="item-3-1">
<a href="#" class="list-group-item">Item 3.1.1</a>
<a href="#" class="list-group-item">Item 3.1.2</a>
<a href="#" class="list-group-item">Item 3.1.3</a>
</div>
<a href="#item-3-2" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 3.2
</a>
<div class="list-group collapse" id="item-3-2">
<a href="#" class="list-group-item">Item 3.2.1</a>
<a href="#" class="list-group-item">Item 3.2.2</a>
<a href="#" class="list-group-item">Item 3.2.3</a>
</div>
<a href="#item-3-3" class="list-group-item" data-toggle="collapse">
<i class="fas fa-angle-right mr-2"></i>Item 3.3
</a>
<div class="list-group collapse" id="item-3-3">
<a href="#" class="list-group-item">Item 3.3.1</a>
<a href="#" class="list-group-item">Item 3.3.2</a>
<a href="#" class="list-group-item">Item 3.3.3</a>
</div>
</div>
</div>
CSS
.just-padding {
padding: 15px;
}
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
Javascript
$(function() {
$('.list-group-item').on('click', function() {
$('.fas', this)
.toggleClass('fa-angle-right')
.toggleClass('fa-angle-down');
});
});