In my ionic project i use expandable card view.but it doesn’t work correctly. When i click a card it always expand first car view.
<ion-card class="accordion"*ngFor= "let item of objectData" >
<ion-card-content id="first" style="display: block" (click)="showmore();">
<p style="font-size: 22px;">{{item.carrierFsCode}}</p>
<div class="row" style="border-bottom:0px">
<div class="col" style="font-size: 25px">{{item.departureAirportFsCode}}</div>
<div class="col" style="padding-top: 20px"><hr></div>
<div class="col" style="text-align: right;font-size: 25px">COK</div>
</div>
<label style="padding-left: 40px;color: #008000">{{item.status}}</label><label style="padding-right: 5px;padding-left: 5px;">-</label><label>departs in 2 hr 4mins</label>
</ion-card-content>
<ion-card-content id="second" style="display: none" (click)="showless();">
<p style="font-size: 22px;">{{item.carrierFsCode}}</p>
<div class="row" style="border-bottom:0px">
<div class="col" style="font-size: 25px">{{item.departureAirportFsCode}}</div>
<div class="col" style="padding-top: 20px"><hr></div>
<div class="col" style="text-align: right;font-size: 25px">COK</div>
</div>
<label style="padding-left: 40px;color: #008000">{{item.status}}</label><label style="padding-right: 5px;padding-left: 5px;">-</label><label>departs in 2 hr 4mins</label>
<div class="col" style="padding-top: 20px"><hr></div>
<label>Departed from Delhi</label><br>
<div class="row" style="border-bottom:0px">
<div class="col">Time</div>
<div class="col" style="text-align: center">Terminal</div>
<div class="col" style="text-align: right">Gate</div>
</div>
<div class="row" style="border-bottom:0px">
<div class="col" style="font-size: 18px">4:20</div>
<div class="col" style="font-size: 18px;text-align: center">2</div>
<div class="col" style="text-align: right;font-size: 18px">A5</div>
</div>
<div class="col" style=""><hr></div>
<label>Arrives at Kochi</label><br>
<div class="row" style="border-bottom:0px">
<div class="col">Time</div>
<div class="col" style="text-align: center">Terminal</div>
<div class="col" style="text-align: right">Gate</div>
</div>
<div class="row" style="border-bottom:0px">
<div class="col" style="font-size: 18px">4:20</div>
<div class="col" style="font-size: 18px;text-align: center">2</div>
<div class="col" style="text-align: right;font-size: 18px">C6</div>
</div>
<div class="col" style=""><hr></div>
<div class="row" style="border-bottom:0px">
<div class="col" >Add to My Flights</div>
<div class="col"><ion-toggle [(ngModel)]="idcheck" (ionChange)="updateItem(idcheck)" style="padding:5px;float: right"></ion-toggle></div>
</div>
</ion-card-content>
</ion-card>
showmore()
{
document.getElementById("second").style.display = 'block';
document.getElementById("first").style.display = 'none';
}
showless()
{
document.getElementById("second").style.display = 'none';
document.getElementById("first").style.display = 'block';
}
my problem is, how to set element id in loop?. And how can expand correct view of the card?
normal view
expandable view: