How to open only one list when opening an accordion list with ngFor and ngIf

I am creating an accordion list in Ionic using ngFor and ngIf to show data from the swapi api.

What I have created right now is that when type in a name like “skywalker” and click on one of the results that appear to expand the accordion list for that person. All of the results that that have appeared all expand when i click on one.

swapi.page.ts

import { Component, OnInit } from '@angular/core';
import { SwapiserviceService } from '../swapiservice.service';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { map, flatMap } from 'rxjs/operators';
import { Observable, forkJoin, of } from 'rxjs';
import { element } from '@angular/core/src/render3';
import { forEach } from '@angular/router/src/utils/collection';
import 'rxjs/add/operator/map'

@Component({
  selector: 'app-swapi',
  templateUrl: './swapi.page.html',
  styleUrls: ['./swapi.page.scss'],
})
export class SwapiPage implements OnInit {
  hideMe: boolean;
  testHiding: boolean;



  constructor(public myService: SwapiserviceService, public http: HttpClient) {}

  ngOnInit() { }

  hideTest: boolean;
testHiding: boolean;

  //Search Result variables for people 
  swapiPeople: any;

  hidingTest() {
    if (this.testHiding) {
      this.testHiding = false;
      console.log("Test Hide false")
    } else {
      this.testHiding = true;
      console.log("Test Hide true")
    }

    //Searches for people in Swapi
    this.http.get(`${environment.swapiUrlBase}people/?search=${this.swapiSearch}`).subscribe((data: any) => {
      this.swapiPeople = data.results
      console.log(this.swapiPeople)
    })


  }
}

swapi.page.html

<ion-header class="header" background-color="orange">
  <ion-toolbar color="danger">
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-searchbar [(ngModel)]="swapiSearch" name="swapiSearch" placeholder="Search DropDown Starwars"
      (ionChange)="hidingTest()" debounce=1000>
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content color="creame">
  <ion-card>
    <ion-list *ngFor="let people of swapiPeople">
      <ion-item (click)="hidingTest()">
        <label>{{people.name}}</label>
      </ion-item>
      <ion-grid *ngIf="testHiding === false">
      <ion-row>Gender: {{people.gender}}</ion-row>
      <ion-row>Birth Year: {{people.birth_year}}</ion-row>
      <ion-row>Species: {{people.species}}</ion-row>
      <ion-row>Height: {{people.height}} centimeters</ion-row>
      <ion-row>Weight: {{people.mass}} Kilograms</ion-row>
      <ion-row>Skin Colour: {{people.skin_color}}</ion-row>
      <ion-row>Hair Colour: {{people.hair_color}}</ion-row>
    </ion-grid>
    </ion-list>
  </ion-card>

</ion-content>

environment.ts

export const environment = {
  swapiUrlBase: "https://swapi.co/api/"
};

How would i be able to only click on one of the expanded list and open only that one.

Source: New feed
Source Url How to open only one list when opening an accordion list with ngFor and ngIf