Expandable card view in loop

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

asd

expandable view:

asdf

1 Like

I’m not sure how to put this politely, but I think you would benefit from a mentorship program or some sort of training.

CSS is designed so that you don’t micromanage styles in your HTML. Ionic has a grid. You should not be directly accessing the DOM in an Ionic/Angular application.

Basically, I see nothing remotely fixable here, and think that what you have should be burned to the ground.

1 Like

can you explain how can do expandable cardview?

1 Like

I think this is a good starting point to learn how to show and hide components:

https://angular.io/api/common/NgIf

You know a better tutorial for the same thing?