fix(accordion): hide panel when destroyOnHide set to false

Add .collapse class to panel. When destoyOnHide is set to `false`, the panel remains visible due to a missing bootstrap class

Fixes #1915

src/accordion/accordion.spec.ts

@@ -251,6 +251,24 @@ describe('ngb-accordion', () => {
     });
   });
 
+  it('should have the appropriate CSS visibility classes', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    fixture.componentInstance.activeIds = 'one,two,three';
+
+    fixture.detectChanges();
+
+    const contents = getPanelsContent(compiled);
+    expect(contents.length).not.toBe(0);
+
+    contents.forEach((content: HTMLElement) => {
+      expect(content).toHaveCssClass('collapse');
+      expect(content).toHaveCssClass('show');
+    });
+  });
+
   it('should only open one at a time', () => {
     const fixture = TestBed.createComponent(TestComponent);
     const tc = fixture.componentInstance;

src/accordion/accordion.ts

@@ -110,8 +110,8 @@ export interface NgbPanelChangeEvent {
             {{panel.title}}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
           </a>
         </div>
-        <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" 
-             class="card-body {{panel.isOpen ? 'show' : null}}" *ngIf="!destroyOnHide || panel.isOpen">
+        <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'"
+             class="card-body collapse {{panel.isOpen ? 'show' : null}}" *ngIf="!destroyOnHide || panel.isOpen">
              <ng-template [ngTemplateOutlet]="panel.contentTpl.templateRef"></ng-template>
         </div>
       </div>