JSFiddle - React, Tailwind, and code Playground

by Óscar Gómez Alcañiz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <h4>
                With collapse
            </h4>
            <hr>
            <ul class="list-group list-group-collapse">
                <li class="list-group-item">
                    <h3>
                        Level 1
                    </h3>
                    
                    <ul class="list-group">
                        <li class="list-group-item">
                            <h4>
                                Level 2.1
                            </h4>
                            
                            <ul class="list-group">
                                <li class="list-group-item">
                                    Item 2.1.1
                                </li>
                                <li class="list-group-item">
                                    Item 2.1.2
                                </li>
                                <li class="list-group-item">
                                    Item 2.1.3
                                </li>
                            </ul>
                        </li>
            
                        <li class="list-group-item">
                            <h4>
                                Level 2.2
                            </h4>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        
        <div class="col-xs-6">
            <h4>
                Without collapse
            </h4>
            <hr>
            <ul class="list-group">
                <li class="list-group-item">
                    <h3>
                        Level 1
                    </h3>
                    
                    <ul class="list-group">
                        <li class="list-group-item">
                            <h4>
                 ...

CSS

.list-group-collapse li > ul li:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.list-group-collapse li > ul {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -11px;
}