BS4 list-group nested

Example for nested list groups

by Beengie

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<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>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"...

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');
  });

});