Keep state of other divs when expanding current div

Question

Currently, I have this small example where if I click on the image icon, it shows the answer to the question and when I click the image again, it hides the answer.

So, given this scenario where I click on the image icon for the first question, it shows the answer. Then if I go the next div and click on the image icon, it should show me the answer for the second div and keep the state of the first div. That is, it should not close the first div.

Currently, in my example, it closes the first div when the second one is open. How can I keep the state of the other divs on the page when the current div is expanded?

Here's the plunker: https://plnkr.co/edit/SzkrltPYPmt4WRijVFuD?p=preview

main code:

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let part of parts">
      <h1 class="question">{{part.question}}
      <img (click)="myclick(part.id)" style="float:right;" [src]="getimage(part.id)"
     class="ic_add"/></h1>
      <p *ngIf="showanswer == part.id" class="answer" > {{part.answer}}</p>
      <hr/>
    </div>
  `,
})
export class App {
 public showAnswer = false; 

    parts = [];
    shoanswer = 0;

     imgsrc="https://cdn2.iconfinder.com/data/icons/rounded-functions-1/154/arrow-circle-direction-down-512.png";

    constructor(){
      this.parts = [
          {
            id: 1,  
            question: "Foo?",
            answer: "Bar"
          },
          {
            id: 2,
            question: "ABC?",
            answer: "123"
          }
      ]
    }

    myclick(id) {
      this.showanswer = this.showanswer == id ? 0 : id;
    }

    getimage(id) {
      return this.showanswer == id ? "https://cdn2.iconfinder.com/data/icons/rounded-functions-1/154/arrow-circle-direction-down-512.png" : "images/ic-add.png";
    }

}

Answer 1

You can store the showing/not showing state in the respective part variable in the template.

<div *ngFor="let part of parts">
  <h1 class="question">{{part.question}}
      <img (click)="part.showanswer = !part.showanswer" style="float:right;" [src]="getimage(part.id)"
     class="ic_add"/></h1>
  <p *ngIf="part.showanswer" class="answer">{{part.answer}}</p>
  <hr/>
</div>

I made a copy plunk with the behaviour here .

For the image you can use the new property to determine which image you should add.

You can pass the part variable instead of just it's id to the getimage method.

<img (click)="part.showanswer = !part.showanswer" style="float:right;" [src]="getimage(part)"
     class="ic_add"/>

And in the getimage method you can use the .showanswer property (or other properties if you have any) to determine which image you should show.

    getimage(part) {
      console.log(part.id + " " + part.showanswer);
      let image = part.showanswer ? "https://images.pexels.com/photos/79290/black-and-white-code-programming-tech-79290.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
      : "https://images.pexels.com/photos/256369/pexels-photo-256369.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb";

      return image;

    }

Here 's the updated plunker as well.

Answer 2

Your problem lies here:

myclick(id) {
      this.showanswer = this.showanswer == id ? 0 : id;
    }

You have only one showanswer for all divs, you need a flag/boolean for every div