Why doesn't this Bootstrap collapse close others with one section open?

Question

I've used standart Booststrap code and it used to work at the beginning, so once any section was open the other one which was open before was getting closed.

I've added some other collapses in it and made shure that all the ID's unique and it works fine except one small thing about the closing other sections when one open . Please help me to figure out

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel-default mainPFPanel">
                    <div class="mainPFPanelHeading" role="tab" id="headingMain1">
                        <h4 class="panel-title text-left">
                            <a role="button" data-toggle="collapse" data-parent="#accordion"
                               href="#collapseMain1" aria-expanded="true" aria-controls="collapseMain1">
                                ТОРТЫ
                            </a>
                        </h4>
                    </div>
                    <div id="collapseMain1" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingMain1">
                        <div class="panel-body  mainPFPanelBody">
                            <div class="panel-group" id="accordionSub1" role="tablist" aria-multiselectable="true">
                                <div class="panel-default mainPFPanel">
                                    <div class="subPFPanelHeading" role="tab" id="headingSub11">
                                        <h4 class="panel-title text-left">
                                            <a role="button" data-toggle="collapse" data-parent="#accordionSub1"
                                               href="#collapseSub11" aria-expanded="true"
                                               aria-controls="collapseCollapse11">
                                                МУССОВЫЕ
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseSub11" class="panel-collapse collapse in" role="tabpanel"
                                         aria-labelledby="headingSub11">
                                        <div class="subPFBody">
                                            <div class="list-group">
                                                <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                                <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                                <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                                <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                                <a href="#" class="list-group-itemPF">Ривьера</a>
                                                <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                                <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                                <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                                <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                                <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                                <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-default mainPFPanel">
                                    <div class="subPFPanelHeading" role="tab" id="headingSub12">
                                        <h4 class="panel-title text-left">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordionSub1" href="#collapseSub12"
                                               aria-expanded="false" aria-controls="collapseSub12">
                                                ЧИЗКЕЙКИ
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseSub12" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="headingSub12">
                                        <div class="subPFBody">
                                            <div class="subPFBody">
                                                <div class="list-group">
                                                    <a href="#" class="list-group-itemPF">Классический</a>
                                                    <a href="#" class="list-group-itemPF">Карамельный</a>
                                                    <a href="#" class="list-group-itemPF">Ягодный</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-default mainPFPanel">
                    <div class="mainPFPanelHeading" role="tab" id="headingMain2">
                    <h4 class="panel-title text-left">
                        <a class="collapsed" role="button" data-toggle="collapse"
                           data-parent="#accordionMain" href="#collapseMain2" aria-expanded="false"
                           aria-controls="collapseMain2">
                            ТАРТЫ
                        </a>
                    </h4>
                </div>
                    <div id="collapseMain2" class="panel-collapse collapse" role="tabpanel"
                     aria-labelledby="headingMain2">
                    <div class="subPFBody">
                        <div class="list-group">
                            <a href="#" class="list-group-itemPF">Ягодные</a>
                            <a href="#" class="list-group-itemPF">Лимонные</a>
                            <a href="#" class="list-group-itemPF">Фруктовые</a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="panel-default mainPFPanel">
                    <div class="mainPFPanelHeading" role="tab" id="headingMain3">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMain"
                           href="#collapseMain3" aria-expanded="false" aria-controls="collapseMain3">
                            ПОРЦИОННЫЕ ДЕСЕРТЫ
                        </a>
                    </h4>
                </div>
                    <div id="collapseMain3" class="panel-collapse collapse" role="tabpanel"
                     aria-labelledby="headingMain3">
                    <div class="panel-body">
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub31">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordionSub3"
                                       href="#collapseSub31" aria-expanded="true"
                                       aria-controls="collapseSub31">
                                        МУССОВЫЕ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub31" class="panel-collapse collapse in" role="tabpanel"
                                 aria-labelledby="headingSub31">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                        <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                        <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                        <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                        <a href="#" class="list-group-itemPF">Ривьера</a>
                                        <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                        <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                        <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                        <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                        <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                        <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub32">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                       data-parent="#accordionSub3" href="#collapseSub32" aria-expanded="false"
                                       aria-controls="collapseSub32">
                                        КЕЙКПОПСЫ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub32" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingSub32">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub33">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                       data-parent="#accordionSub3" href="#collapseSub33" aria-expanded="false"
                                       aria-controls="collapseSub33">
                                        КАПКЕЙКИ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub33" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingSub33">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub34">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                       data-parent="#accordionSub3" href="#collapseSub34" aria-expanded="false"
                                       aria-controls="collapseSub34">
                                        ТАРТАЛЕТКИ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub34" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingSub34">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Ягодные</a>
                                        <a href="#" class="list-group-itemPF">Лимонные</a>
                                        <a href="#" class="list-group-itemPF">Фруктовые</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

Check out the solution here: http://stackoverflow.com/questions/14248194/close-responsive-navbar-automatically — ZombieChowder, Oct 12 '16 at 14:52

score 5 · Accepted Answer · answered Oct 12 '16 at 15:56

It is important to have the correct data-parent attribute for proper control on the accordion, data-target needs to set correctly.

This should work:

<!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                </head>
                <body>

                    <div class="container">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">ТОРТЫ</a>
                                    </h4>
                                </div>
                                <div id="collapse1" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <div class="container">
                                            <div class="panel-group" id="accordionSub">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionSub" href="#collapse11">МУССОВЫЕ</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapse11" class="panel-collapse collapse in">
                                                        <div class="panel-body">
                                                            <div class="list-group">
                                                                <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                                                <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                                                <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                                                <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                                                <a href="#" class="list-group-itemPF">Ривьера</a>
                                                                <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                                                <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                                                <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                                                <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                                                <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                                                <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionSub" href="#collapse21">ЧИЗКЕЙКИ</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapse21" class="panel-collapse collapse">
                                                        <div class="panel-body"><div class="list-group">
                                                            <a href="#" class="list-group-itemPF">Классический</a>
                                                            <a href="#" class="list-group-itemPF">Карамельный</a>
                                                            <a href="#" class="list-group-itemPF">Ягодный</a>
                                                        </div></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> ТАРТЫ </a>
                                    </h4>
                                </div>
                                <div id="collapse2" class="panel-collapse collapse">
                                    <div class="panel-body"><div class="list-group">
                                        <a href="#" class="list-group-itemPF">Ягодные</a>
                                        <a href="#" class="list-group-itemPF">Лимонные</a>
                                        <a href="#" class="list-group-itemPF">Фруктовые</a>
                                    </div></div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">ПОРЦИОННЫЕ ДЕСЕРТЫ</a>
                                    </h4>
                                </div>
                                <div id="collapse3" class="panel-collapse collapse">
                                    <div class="panel-body">


                                        <div class="panel-group" id="accordionSub2">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse12">
                                                        МУССОВЫЕ </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse12" class="panel-collapse collapse in">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                                        <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                                        <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                                        <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                                        <a href="#" class="list-group-itemPF">Ривьера</a>
                                                        <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                                        <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                                        <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                                        <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                                        <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                                        <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                                    </div></div>
                                                </div>
                                            </div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse22">
                                                        КЕЙКПОПСЫ </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse22" class="panel-collapse collapse">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                                    </div></div>
                                                </div>
                                            </div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse32">
                                                        КАПКЕЙКИ</a>
                                                    </h4>
                                                </div>
                                                <div id="collapse32" class="panel-collapse collapse">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                                    </div></div>
                                                </div>
                                            </div>

                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse42">
                                                        ТАРТАЛЕТКИ </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse42" class="panel-collapse collapse">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Ягодные</a>
                                                        <a href="#" class="list-group-itemPF">Лимонные</a>
                                                        <a href="#" class="list-group-itemPF">Фруктовые</a>
                                                    </div></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </body>
            </html>

Yep , it did , thanks a lot for a quick and correct respond ! — Arthur Artsabliuk, Oct 13 '16 at 13:15

Why doesn't this Bootstrap collapse close others with one section open?

1 Answers1

Linked