I am very new to Bootstrap. Hence, please pardon me if the question is not very sensible.
So I have the below code sample:
<!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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- this is the start of tthe main container -->
<div class="container">
<h2>Collapsible List Group</h2>
<p>Click on the collapsible panel to open and close it.</p>
<!-- each of the "panel-group" id="accordion" starts here-->
<div class="panel-group" id="accordion">
<!-- name scan1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Scan1 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan1_inner_accordion">
<!-- scan1 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api1" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan1_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api1 ends here-->
<!-- scan1 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api2" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan1_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan1 ends here-->
<!-- name scan2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2" data-parent="#accordion">Scan2 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan2_inner_accordion">
<!-- scan2 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api1" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan2_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api1 ends here-->
<!-- scan2 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api2" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan2_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan2 ends here-->
<!-- name scan3 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3" data-parent="#accordion">Scan3 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan3_inner_accordion">
<!-- scan3 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api1" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan3_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api1 ends here-->
<!-- scan3 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api2" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan3_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan3 ends here-->
</div>
<!-- each of the "panel-group" id="accordion" ends here-->
</div>
<!-- this is the end of tthe main container -->
</body>
</html>Now here's the flow of clicks that happen:
click on "Scan1 Results Date of Scan - Some date here" now from the collapsible click on "http://localhost/api/v1/getWallet" and it opens up details under it. Now if I click on "http://localhost/api/v1/getProfile" the previously opened details close and relevant one now opens up. Now if I click on "Scan2 Results Date of Scan - Some date here" and then click back on "Scan1 Results Date of Scan - Some date here", the last opened item is still visible.
What I want is when I click back again on "Scan1 Results Date of Scan - Some date here" then all the internal items should be collapsed, unlike what's happening right now, the last opened item still remains opened.
How can I do this ?
You have to collapse the inner accordion when you click on the outer accordion. Just add below script code in your script file
$("a[data-parent='#accordion'").click(function(e) {
$('.list-group-item .panel-collapse').removeClass('in');
});<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- this is the start of tthe main container -->
<div class="container">
<h2>Collapsible List Group</h2>
<p>Click on the collapsible panel to open and close it.</p>
<!-- each of the "panel-group" id="accordion" starts here-->
<div class="panel-group" id="accordion">
<!-- name scan1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Scan1 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan1_inner_accordion">
<!-- scan1 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api1" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan1_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api1 ends here-->
<!-- scan1 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api2" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan1_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan1 ends here-->
<!-- name scan2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2" data-parent="#accordion">Scan2 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan2_inner_accordion">
<!-- scan2 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api1" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan2_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api1 ends here-->
<!-- scan2 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api2" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan2_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan2 ends here-->
<!-- name scan3 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3" data-parent="#accordion">Scan3 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan3_inner_accordion">
<!-- scan3 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api1" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan3_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api1 ends here-->
<!-- scan3 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api2" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan3_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan3 ends here-->
</div>
<!-- each of the "panel-group" id="accordion" ends here-->
</div>
<!-- this is the end of tthe main container -->