Trying to build multiple accordions with bootstrap collapse. Clicking on a second accordion collapses the first

Question

I am working on building an accordion data type in AngularJS. I have this code that works as far as basic functionality, but I have a big issue.

This is the code:

 var app = angular.module('accordions', []); app.controller('MainCtrl', function($scope) { $scope.fieldAccordions = [{ fieldAccordionHeader: 'Header 1', fieldAccordionItems: [{ desc: 'Item 1 - A' }, { desc: 'Item 1 - B' }] }, { fieldAccordionHeader: 'Header 2', fieldAccordionItems: [{ desc: 'Item 2' }] }, { fieldAccordionHeader: 'Header 3', fieldAccordionItems: [{ desc: 'Item 3' }] }]; });

 <!DOCTYPE html> <html ng-app="accordions"> <head> <meta charset="utf-8" /> <title>AngularJS Accordions</title> <link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body ng-controller="MainCtrl"> <div class="panel-group" id="accordion"> <div class="panel panel-default" ng-repeat="field in fieldAccordions track by $index"> <div class="panel-heading"> <div class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $index }}"> {{ field.fieldAccordionHeader }} </a> </div> </div> <div id="collapse{{ $index }}" class="panel-collapse collapse in"> <div class="panel-body"> <div ng-repeat="item in field.fieldAccordionItems track by $index">{{ item.desc }}</div> </div> </div> </div> </div> </body> </html>

On the page that I am working on I need an accordion, followed by other fields such as text, images, and then another accordion. This code will work for a first accordion. When I call fieldAccordions again on the page, opening its headers will open the headers from the initial fieldAccordions element.

This is how my interface looks:

First fieldAccordions on the page: (I'll just call it fieldAccordions1)
Header 1 for fieldAccordions1 // opens Header 1 for fieldAccordions1
Header 2 for fieldAccordions1 // opens Header 2 for fieldAccordions1
Header 3 for fieldAccordions1 // opens Header 3 for fieldAccordions1


//Text

//Images

Second fieldAccordions on the page: (I'll just call it fieldAccordions2)
Header 1 for fieldAccordions2  // opens Header 1 for fieldAccordions1
Header 2 for fieldAccordions2  // opens Header 2 for fieldAccordions1
Header 3 for fieldAccordions2  // opens Header 3 for fieldAccordions1
Header 4 for fieldAccordions2  // opens Header 4 for fieldAccordions2
// header 4 opens for fieldAccordions2 since fieldAccordions1 does not have a 4th child

Can anyone help me with this? I think the problem is the way I am using $index. I need to have a unique id every time I generate a new fieldAccordion, but I am stuck.

Answer 1

 var app = angular.module('accordions', []); app.controller('MainCtrl', function($scope) { $scope.fieldAccordions = [{ fieldAccordionHeader: 'Header 1', collapseToggle: 'one', fieldAccordionItems: [{ desc: 'Item 1 - A' }, { desc: 'Item 1 - B' }] }, { fieldAccordionHeader: 'Header 2', collapseToggle: 'two', fieldAccordionItems: [{ desc: 'Item 2' }] }, { fieldAccordionHeader: 'Header 3', collapseToggle: 'three', fieldAccordionItems: [{ desc: 'Item 3' }] }]; });

 <!DOCTYPE html> <html ng-app="accordions"> <head> <meta charset="utf-8" /> <title>AngularJS Accordions</title> <link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body ng-controller="MainCtrl"> <div class="panel-group" id="accordion"> <div class="panel panel-default" ng-repeat="field in fieldAccordions track by $index"> <div class="panel-heading"> <div class="panel-title"> <a data-toggle="collapse" href="#{{field.collapseToggle}}"> {{ field.fieldAccordionHeader }} </a> </div> </div> <div id="{{field.collapseToggle}}" class="panel-collapse collapse in"> <div class="panel-body"> <div ng-repeat="item in field.fieldAccordionItems track by $index">{{ item.desc }}</div> </div> </div> </div> </div> </body> </html>

Try with I believe, there was some issues with names of collapse, reference etc. To be sure It's best to have it clearly named and separated.

Trying to build multiple accordions with bootstrap collapse. Clicking on a second accordion collapses the first

Question

1 answers

solution1
0 2017-10-25 19:27:01

Trying to build multiple accordions with bootstrap collapse. Clicking on a second accordion collapses the first

Question

1 answers

solution1 0 2017-10-25 19:27:01

solution1
0 2017-10-25 19:27:01