How to show/hide ion-card-content?

Ionic Framework ionic-v3
1

Hello,

I was wondering if something similar to this, was possible in case of a list. I wanted to hide just the ion-card-content, upon click on ion-card-header if I have a list of cards.

Basically, I have something like this in my html:

<ion-list>
	<ion-card *ngFor="let entry of entries | async; let i = index">
	  <ion-card-header (click)="toggleSection(i)" class="header">
		{{ entry.name }}
	  </ion-card-header>
	  <ion-card-content [hidden]="entry.hidden">
		"some content"
	  </ion-card-content>
	</ion-card>
</ion-list>

The problem is that entry.hidden doesn’t exist in the “entries” (namely, hidden is not a field of entry), so I don’t know how to store this property efficiently for each element of entries to be used to show/hide the ion-card-content.

Any suggestion?

2

Hey! :slight_smile:

Solved very soon:
I have created an array of boolean having the same size of the resulting json from web service call. All values are set to false by default, and here’s the HTML code:

<ion-list>
   <ion-card *ngFor="let entry of entries | async; let i = index">
     <ion-card-header (click)="toggleSection(i)" class="header">
   	{{ entry.name }}
     </ion-card-header>
     <ion-card-content [ngClass]="{'detail-enabled': clicked[i], 'detail-off': !clicked[i]}">
   	"some content"
     </ion-card-content>
   </ion-card>
</ion-list>

Actually I apply two different CSS classes (having the display property to none or block) and applying dinamically depending on the value of clicked[i].

Here’s the toggleSelection(i) function:

toggleSection(i) {
    this.clicked[i] = !this.clicked[i];
  }