Simple expanding list independent open & close

@llamaface wrote:

Hey

I’m a bit of a noob - learning slowly but surely. It has taken me a while to get to this stage by searching many posts. It’s amazing how many ideas were not quite what i was needing.

I have built code for a simple expanding list cobbled together from my learning and other folks ideas and it seems to be working. At first when i clicked on the list all of them opened at the same time. So i added a different number to each method (don’t ask my why but it sort of worked) e.g. toggleGroup(1), toggleGroup(2) and they now open one at a time. The only problem is that when one opens the other one closes.

Is there a simple way i can get them to open and close independently? Simple as I might not understand and i would likely mess it up. I’m thinking it need some variable where the numbers are but not sure how to implement.

Any help would be great, thanks!!

home.html

<ion-card>
 <ion-list>
   <button (click)="toggleGroup(1)" ion-item text-wrap>
      <ion-icon color="success" item-left [name]="isGroupShown(1) ? 'remove-circle' : 'add-circle'" align-items-start></ion-icon>
        <ion-label><strong>Item 1</strong></ion-label>
      </button>
  </ion-list>
  <ion-list>
      <div *ngIf="isGroupShown(1)" padding>
        Item 1 content goes here
      </div>
  </ion-list>
</ion-card>

<ion-card>
  <ion-list>
    <button (click)="toggleGroup(2)" ion-item text-wrap>
      <ion-icon color="success" item-left [name]="isGroupShown(2) ? 'remove-circle' : 'add-circle'" align-items-start></ion-icon>
        <ion-label><strong>Item 2</strong></ion-label>
      </button>
  </ion-list>
  <ion-list>
      <div *ngIf="isGroupShown(2)" padding>
        Item 2 content goes here
      </div>
  </ion-list>
</ion-card>

home.ts

export class HomePage {

  shownGroup = null;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams) {
  }

    // Methods for expanding list
    toggleGroup(group) {
      if (this.isGroupShown(group)) {
          this.shownGroup = null;
      } else {
          this.shownGroup = group;
      }
    };
    
    isGroupShown(group) {
      return this.shownGroup === group;
    };
  
}

Posts: 1

Participants: 1

Read full topic