I'm currently working on a webpage that incorporates both the Accordion and Sortable features. I came across this Plunker as reference, and although most of it is functioning properly, I am facing an issue with collapsing accordion panels. The header rows collapse correctly, but the content within each section remains visible under the subsequent heading.
After analyzing various examples, I noticed that when the header is clicked to collapse a panel, it momentarily acquires a collapsing class which is then replaced by a collapse class to hide the panel. However, in my case, the panels never receive the collapse class, resulting in their visibility behind the headings below. This problem persists regardless of the close-others value.
Below is the relevant snippet from my HTML:
<div ng-controller="myController">
<accordion close-others="true" ui:sortable="sortableOptions" ng:model="items">
<accordion-group ng-repeat="item in items">
<div accordion-heading heading="{{item.name}}">
<span class="handle btn">↕</span><span>{{item.name}}</span>
</div>
{{item.details}}
</accordion-group>
</accordion>
</div>
And here's a glimpse of the app.js file:
var app = angular.module('myApp', ['ui.sortable', 'ui.bootstrap']);
app.config(['$provide', function ($provide){
$provide.decorator('accordionDirective', function($delegate) {
var directive = $delegate[0];
directive.replace = true;
return $delegate;
});
}]);
app.controller('myController', function($scope){
$scope.items = [{name: "my item", details: "my details}, ...]
$scope.sortableOptions = {
handle: ' .handle',
axis: 'y'
};
});
If anyone could offer a solution or workaround for this issue, it would be greatly appreciated.
UPDATE I have managed to replicate this behavior in another Plunker. Feel free to experiment with it.