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

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">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</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">
Классический
Карамельный
Ягодный
</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">
Ягодные
Лимонные
Фруктовые
</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">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</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">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</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">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</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">
Ягодные
Лимонные
Фруктовые
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

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">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</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">
Классический
Карамельный
Ягодный
</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">
Ягодные
Лимонные
Фруктовые
</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">
Роза-Малина-Личи
Манго-Маракуйя
Черника-Ваниль-Малинаc
Клубника-Брют "ROSE
Ривьера
Клюква-Малина
Black Bourbon
Шоколад-Малина
Фисташка-Малина (вишня)
Карамель-Шоколад
Ванильно-Сливочная Груша
</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">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</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">
Шоколад-Карамель
Бана-Малина
С Лимонным Курдом
</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">
Ягодные
Лимонные
Фруктовые
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>