Bootstrap Open/Collapse not working - html

Question

I am trying to open div which is inside the div.
My second div is not opening, in fact, the first div is closing.
Try to click Part 1 then The div under it.
I want that div to be open when clicking on it, but it is closing the part1 div
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<center><strong>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" href="#part1"> <!--Date of Birth-->
<div class="panel-heading">
<h4 class="panel-title">
Part 1
</h4>
</div>
<div id="part1" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordion1.1">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion1.1" href="#1.1"> <!--Date of Birth-->
<div class="panel-heading">
<h4 class="panel-title">
ऑडियो नंबर 15 छह काय के जीव
</h4>
</div>
<div id="1.1" class="panel-collapse collapse">
<div class="panel-body">
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=1HMEmwK4COifRjhe8IWM82Pn5tw3UO4xs">
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</strong></center>

Answer 1

Move the part1 div and its children outside the accordion div. And I renamed your 1.1 div to one because id's shouldn't begin with a number.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<center>
<strong>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" href="#part1">
<!--Date of Birth-->
<div class="panel-heading">
<h4 class="panel-title">
Part 1
</h4>
</div>
</div>
</div>
<div id="part1" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordion1.1">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion1.1" href="#one">
<!--Date of Birth-->
<div class="panel-heading">
<h4 class="panel-title">
ऑडियो नंबर 15 छह काय के जीव
</h4>
</div>
<div id="one" class="panel-collapse collapse">
<div class="panel-body">
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=1HMEmwK4COifRjhe8IWM82Pn5tw3UO4xs">
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
</strong>
</center>