diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
index afb8e78b7a..a5be2e9b2c 100644
--- a/src/accordion/accordion.spec.ts
+++ b/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;
diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
index ff6b8ba4f9..60a6101b36 100644
--- a/src/accordion/accordion.ts
+++ b/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>