I have integrated the angular bootstrap UI library into my website by following this link: https://angular-ui.github.io/bootstrap/
One issue I am facing is that when I implement a collapsible feature using this library, it collapses or expands every element with the collapse functionality instead of just the specific one that is clicked.
Below is the code snippet I am currently using:
var app = angular.module('someApp', ['ui.bootstrap']);
app.controller('collapseController', ['$scope', function ($scope) {
$scope.isCollapsed = true;
};.passInfoDropdown {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
font-weight: bold;
}
.dividerLine {
background-color: #DED7CF;
height: 2px;
}
.passInfoTableCellLeft {
width: 220px;
}<div class="dividerLine"></div>
<div class="click" ng-click="isCollapsed = !isCollapsed">
<table>
<tr>
<td class="passInfoTableCellLeft"><div class="passInfoDropdown inline">TSA Information (optional)</div></td>
<td><i class="fa fa-chevron-down inline"></i></td>
</tr>
</table>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
<div class="dividerLine"></div>
<div class="click" ng-click="isCollapsed = !isCollapsed">
<table>
<tr>
<td class="passInfoTableCellLeft"><div class="passInfoDropdown inline">Loyalty Programs (optional)</div></td>
<td><i class="fa fa-chevron-down inline"></i></td>
</tr>
</table>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>I need to modify the code so that only the unique element I click on collapses. How can I achieve this?