kfmc_website/src/app/Internal-Page/hospital-content/hospital-content.component.html

<div class="hospitalContent-w">
  <div class="container">
    <div class="row">
        <div class="containerContent-w">
            <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
              <div class="row">
                  <div class="col-6 col-md-3">
                      <div class="recordsContent-w">
                          <!-- <ul class="list-unstyled">
                            <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
                                {{hospital.name}}
                                <div *ngIf="i == expandedIndex">
                                    <div class="containetttt" *ngFor="let field of hospital['fields']">
                                      <ul class="list-unstyled nestedMenu">
                                        <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
                                          {{field.title}}
                                        </li>
                                      </ul>
                                    </div>
                                </div>
                            </li>
                          </ul> -->
                          <!-- <div class="accordion" id="accordionExample">
                              <div class="panel-group testGroup-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
                                  <div class="panel panel-default">
                                      <div class="panel-heading accordion-toggle collapsed" [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
                                          <h4 class="panel-title">{{hospital.name}}</h4>
                                      </div>
                                      <div *ngFor="let field of hospital['fields']" [ngClass]="{'show' : i == 0}" id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
                                          <div class="panel-body testBody-w">
                                              <ul class="list-unstyled nestedMenu">
                                                <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
                                                  {{field.title}}
                                                </li>
                                              </ul>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div> -->
                          
                          <div id="accordion">
                            <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
                              <div class="card-header" [attr.id]="'heading'+(i+1)">
                                  <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
                                    <h4 class="panel-title">{{hospital.name}}</h4>
                                  </button>
                              </div>
                          
                              <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
                                <div class="card-body testBody-w">
                                    <ul class="list-unstyled">
                                        <li (click)="showDescriptionDetails(field)"  [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:right;margin-right:-23px">
                                            {{field.title}}
                                        </li>
                                    </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                      </div>
                  </div>
                  <div class="col-6 col-md-9">
                    <div class="information">
                      <h2>{{detailsField.title}}</h2>
                      <p [innerHTML]="detailsField.description"></p>
                    </div>
                  </div>
              </div>
            </ng-template>

            <ng-template #englishTemplate>
              <div class="container" style="direction:ltr">
                <div class="row">
                    <div class="col-6 col-md-3">
                        <div class="recordsContent-w">
                            <!-- <div class="accordion nothome" id="accordionExample">
                                <div class="panel-group testGroupEn-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
                                    <div class="panel panel-default">
                                        <div class="panel-headingEn accordion-toggle collapsed"  [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
                                            <h4 class="panel-title">{{hospital.name_en}}</h4>
                                        </div>
                                        <div *ngFor="let field of hospital['fields']" [ngClass]="{'show' : i == 0}" id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
                                            <div class="panel-body testBodyEn-w">
                                                <ul class="list-unstyled nestedMenu">
                                                  <li (click)="showDescriptionDetails(field)">
                                                    {{field.title_en}}
                                                  </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->

                            <div id="accordion">
                                <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
                                    <div class="card-header" [attr.id]="'heading'+(i+1)">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
                                        <h4 class="panel-title">{{hospital.name_en}}</h4>
                                        </button>
                                    </h5>
                                    </div>
                                
                                    <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
                                    <div class="card-body testBody-w">
                                        <ul class="list-unstyled nestedMenu">
                                            <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:left">
                                                {{field.title_en}}
                                            </li>
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <ul class="list-unstyled">
                              <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
                                  {{hospital.name_en}}
                                  <div *ngIf="i == expandedIndex">
                                      <div class="containetttt" c>
                                        <ul class="list-unstyled nestedMenu">
                                          <li (click)="showDescriptionDetails(field)">
                                            {{field.title_en}}
                                          </li>
                                        </ul>
                                      </div>
                                  </div>
                              </li>
                            </ul> -->
                        </div>
                    </div>
                    <div class="col-6 col-md-9">
                      <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
                        <h2>{{detailsField.title_en}}</h2>
                        <p>{{detailsField.description_en}}</p>
                      </div>
                    </div>
                    <div class="col-6 col-md-9">
                      <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
                        <h2>{{detailsField.title_en}}</h2>
                        <p>{{detailsField.description_en}}</p>
                      </div>
                    </div> 
                </div>
              </div>
            </ng-template>

        </div>
    </div>
  </div>
</div>