diff --git a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html
index 025158c6e5..114354356d 100644
--- a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html
+++ b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.html
@@ -1,14 +1,14 @@
-<ngb-accordion [activeIds]="getSelectedTabId()" (panelChange)="onTabChange($event)"  class="svy-accordion"  [id]="servoyApi.getMarkupId()" [sabloTabseq]="tabSeq" [sabloTabseqConfig]="{container: true, reservedGap: 50}">
-    <ngb-panel *ngFor="let tab of tabs;let i = index" [disabled]="tab.disabled || !tab.containsFormId" [id]="tab._id">
-      <ng-template ngbPanelHeader>
-            <button ngbPanelToggle class="accordion-button" (click)="tabClicked(tab, i , $event)">
+<div ngbAccordion [closeOthers]="true" #element class="svy-accordion"  [id]="servoyApi.getMarkupId()" [sabloTabseq]="tabSeq" [sabloTabseqConfig]="{container: true, reservedGap: 50}">
+    <div ngbAccordionItem *ngFor="let tab of tabs;let i = index" [disabled]="tab.disabled || !tab.containsFormId" [id]="tab._id" [collapsed]="getSelectedTabId() !== tab._id">
+      <div ngbAccordionHeader>
+            <button ngbAccordionButton class="accordion-button" (click)="tabClicked(tab, i , $event)">
                 <span [innerHTML]='tab?.text'></span>
             </button>
-      </ng-template>
-      <ng-template ngbPanelContent>
-      	<div #element style="position: relative;overflow: auto;top: 0px;bottom: 0px;left: 0px;right: 0px;" [style.height.px]="panelHeight">
+      </div>
+      <div ngbAccordionCollapse>
+      	<div  ngbAccordionBody style="position: relative;overflow: auto;top: 0px;bottom: 0px;left: 0px;right: 0px;" [style.height.px]="panelHeight">
       		<ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{name:getForm(tab)}"></ng-template>
       	</div>
-      </ng-template>
-    </ngb-panel>
-</ngb-accordion>
+      </div>
+    </div>
+</div>
diff --git a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts
index c2887e3170..350778c499 100644
--- a/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts
+++ b/com.servoy.eclipse.ngclient.ui/node/projects/servoydefault/src/lib/accordion/accordion.ts
@@ -2,7 +2,6 @@ import { Component, Renderer2, Input, Output, EventEmitter, ViewChild, SimpleCha
 import { WindowRefService } from '@servoy/public';
 
 import { BaseTabpanel,Tab } from '../tabpanel/basetabpanel';
-import { NgbPanelChangeEvent } from '@ng-bootstrap/ng-bootstrap';
 import { LoggerFactory } from '@servoy/public';
 
 @Component({
@@ -31,6 +30,7 @@ export class ServoyDefaultAccordion extends BaseTabpanel {
     }
 
     private updateContentHeight() {
+        
         let totalHeight : number;
         let wrapper = null;
         if (this.elementRef) {
@@ -45,11 +45,6 @@ export class ServoyDefaultAccordion extends BaseTabpanel {
         this.panelHeight = totalHeight;
     }
 
-    onTabChange( event: NgbPanelChangeEvent ) {
-        // do prevent it by default, so that hte server side can decide of the swich can happen.
-        event.preventDefault();
-    }
-
     selectTabAt( selectionIndex: number ) {
         if ( selectionIndex >= 0 && selectionIndex < this.tabs.length ) {
             let tabToSelect = this.tabs[selectionIndex];
@@ -59,13 +54,13 @@ export class ServoyDefaultAccordion extends BaseTabpanel {
             this.select( tabToSelect );
         }
     }
-    
+
     getSelectedTabId() : any{
-        let id = super.getSelectedTabId();
+        const id = super.getSelectedTabId();
         if (id == null) return [];
         return id;
     }
-    
+
     tabClicked(tab: Tab,tabIndexClicked: number, event){
         this.select( this.tabs[tabIndexClicked] );
     }