Свернуть внутреннюю секцию остается не свернутой, когда одна внутренняя секция разрушается

Question

Я создал сворачиваемое меню с начальной загрузкой.

Основная работа сворачивания, как и ожидалось;когда выбрана одна кнопка, другая сворачивается.

Внутри каждого свертывания я добавляю другие сворачиваемые кнопки.

Однако, когда внутри происходит другое свертывание, другой раздел не сворачивается.

Когда выбрана кнопка «content 2 inner», после этого кнопка «Content 1 Iner» остается незапертой

Вы можете проверить https://codepen.io/snarex/pen/WqrvpP

<div class="container" id="myGroup">
<div class="row">
    <div class="col-lg-12">
        <button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
            aria-expanded="false" aria-controls="collapseExample">
            content 1
        </button>
        <div class="collapse" id="collapseExample" data-parent="#myGroup">
            <div class="card card-body">
                <div class="row" id="myGroup1">
                    <div class="col-lg-12">
                        <button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11"
                            role="button" aria-expanded="false" aria-controls="collapseExample11">
                            content 1 inner
                        </button>
                        <div class="collapse" id="collapseExample11" data-parent="#myGroup1">
                            <div class="card card-body">
                                Content 1 inner  one here
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <button class="btn btn-primary" type="button" data-toggle="collapse"
                            data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
                            Content 2 inner 
                        </button>
                        <div class="collapse" id="collapseExample12" data-parent="#myGroup1">
                            <div class="card card-body">
                                Content 2 inner  here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-2">
    <div class="col-lg-12">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2"
            aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
        <div class="collapse" id="collapseExample2" data-parent="#myGroup">
            <div class="card card-body">
                <div class="row" id="myGroup2">
                    <div class="col-lg-12">
                        <button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21"
                            role="button" aria-expanded="false" aria-controls="collapseExample21">
                            content 1 inner
                        </button>
                        <div class="collapse" id="collapseExample21" data-parent="#myGroup2">
                            <div class="card card-body">
                                Content inner one here
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-lg-12">
                        <button class="btn btn-primary" type="button" data-toggle="collapse"
                            data-target="#collapseExample22" aria-expanded="false"
                            aria-controls="collapseExample22">
                            Content 2 inner
                        </button>
                        <div class="collapse" id="collapseExample22" data-parent="#myGroup2">
                            <div class="card card-body">
                                Content 2 inner here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

data-parent должен быть родителем обоих, а не родным братом, как у вас с строками.Сделать карточку родительской ...

https://www.codeply.com/go/DRxAXQF7E7

<div class="container" id="myGroup">
    <div class="row">
        <div class="col-lg-12">
            <button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                content 1
            </button>
            <div class="collapse" id="collapseExample" data-parent="#myGroup">
                <div class="card card-body" id="myGroup1">
                    <div class="row">
                        <div class="col-lg-12">
                            <button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample11">
                                content 1 inner
                            </button>
                            <div class="collapse" id="collapseExample11" data-parent="#myGroup1">
                                <div class="card card-body">
                                    Content 1 inner one here
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
                                Content 2 inner
                            </button>
                            <div class="collapse" id="collapseExample12" data-parent="#myGroup1">
                                <div class="card card-body">
                                    Content 2 inner here
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-lg-12">
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
                Content 2
            </button>
            <div class="collapse" id="collapseExample2" data-parent="#myGroup">
                <div class="card card-body" id="myGroup2">
                    <div class="row">
                        <div class="col-lg-12">
                            <button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21" role="button" aria-expanded="false" aria-controls="collapseExample21">
                                content 1 inner
                            </button>
                            <div class="collapse" id="collapseExample21" data-parent="#myGroup2">
                                <div class="card card-body">
                                    Content inner one here
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-lg-12">
                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample22" aria-expanded="false" aria-controls="collapseExample22">
                                Content 2 inner
                            </button>
                            <div class="collapse" id="collapseExample22" data-parent="#myGroup2">
                                <div class="card card-body">
                                    Content 2 inner here
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>