<ion-grid class="grid">
  <!-- header -->
  <ion-row class="ion-justify-content-center tab-header" (click)="onClick()"  >
    <ion-col [size]="12" no-padding>
      <div class="header">
        <img [src]="show ? 'assets/icon/list-icon-up.png' : 'assets/icon/list-icon-down.png' " 
        [ngClass]=" direction == 'ltr' ? 'icon right' : 'icon left' " >
        <ng-container *ngIf="header && !subHeader" > 
          <p  [ngClass]=" direction == 'ltr' ? 'title left' : 'title right' " >  {{header}} </p> 
        </ng-container>
        <ng-container *ngIf="header && subHeader ">
            <p 
            [ngClass]=" direction == 'ltr' ? 'title-subtitle left' : 'title-subtitle right' "
            class="innerheader"  > <strong> {{header}} </strong> <br> {{subHeader}} </p>
        </ng-container>
      </div>
    </ion-col>
  </ion-row>

  <!-- rerendered every tiem version-->
  <ion-row class="zoomIn" *ngIf="show">
    <ion-col [size]="12" no-padding>
      <ng-content> </ng-content>
    </ion-col>
  </ion-row>

</ion-grid>