Bootstrap accordion (On click of an accordion should close other accordions) - twitter-bootstrap-3

Question

My current accordion functionality is when we click on '+' sign it opens the accordion and leaves it open even though we click on the '+' sign of other accordion.
What i need is on click of one accordion other open accordions should close.
Below is my Codepen link.
<aside class="col-md-4">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
</section>
</aside>
Thanks
CodePen

Answer 1

You can achieve this by using data-parent to your link, here is the snippet with your code
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
.sidebar-tools a {
color: white;
}
a.tile-link {
text-decoration: none;
}
.tile-link {
-js-display: flex;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2980b9;
padding: 10px;
margin: 2px 0;
}
.tile-link:hover {
background-color: #2980b9;
}
.tile-link[data-toggle]:after {
content: '\f067';
font-family: 'fontawesome';
transition: all .25s ease-in-out;
float: right;
}
.tile-link[aria-expanded="true"]:after {
transform: rotate(45deg);
}
.sidebar-collapse {
background-color: #95a5a6;
margin-top: -2px;
}
.sidebar-collapse .sidebar-collapse-link {
color: white;
display: block;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<aside class="col-md-4" id="myGroup">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>