Hide information from an Ionic/angular Collapse

Question

I have a Collapse that works well, however I need to hide/show the trigger according to the index of that product.

What I currently have:
Html:

<p data-toggle="collapse" attr.data-target="#{{pergunta.id_pergunta}}" (click)="hideInformacoes()" [hidden]="tocouInfo" class="maisInformacoes">Ver mais informações</p>

<div id="{{pergunta.id_pergunta}}" class="alinha collapse">
    Informações do produto
</div>

Ts:

  hideInformacoes(){
    if(this.tocouInfo == false){
      this.tocouInfo = true;
    }
    else if(this.tocouInfo == true){
      this.tocouInfo = false;
    }
  }

But as I’m iterating on an ngfor, as soon as I click on the View more information it disappears as expected, but it also hides it from other products that have not yet been clicked, I need to figure out a way to pass the index of this product clicked and hide only it. Someone has done something similar?

Answer 1

After a search I managed easily through the following code:

(click)="hideinfo[i] = !hideinfo[i]" [hidden]="hideinfo[i]"

I declared a hideinfo array on my ts:

hideinfo[];

I got my ng index for adding:

let i = index;