Ionic expandable card view

Ionic Framework ionic-v3
1

i create a simple expandable card view . when i click a first card it expands,but ,when click another the first clicked card not collapse.(both are in expanded view ). how to resolve it?

html:

<ion-card *ngFor= "let item of objectData;let k=index;" >
    <ion-card-content (click)="showmore(k,item.carrierFsCode,item.arrivalAirportFsCode,item.departureAirportFsCode,item.flightId);" id="{{k}}" style="display: block">
      <p style="font-size: 22px;">{{item.carrierFsCode}}{{item.flightNumber}}</p>
     ..
...
....
.......

    </ion-card-content>


    <ion-card-content  class="panel" id="{{k}}second" style="display: none" (click)="showless(k);">
      <p style="font-size: 22px;">{{airline_name}}</p>
.............
.............
...........
       </ion-card-content>
  </ion-card>

ts:


showmore(k,flightcode,arrivalairportcode,departureairportcode,flightid)
  {
   
    
    document.getElementById(k).style.display = 'none';
    document.getElementById(k+"second").style.display = 'block';
  }
  showless(k)
  {
    document.getElementById(k+"second").style.display = 'none';
    document.getElementById(k).style.display = 'block';
  }
2

try to web inspect and see that styles are changing r not according to your changes.if not apply style=“display: none !important;”