How can I create an Accordion List within ionic 2?

Question

I want to integrate an accordion in my project using expandable groups but for a recent project, I was needing a rendition of an accordion that expanded text or more precisely overflowed content.

Can you tell me how it will done within ionic 2 ?

Answer 1

Check the demo of accordion list within ionic 2 on Github :

https://github.com/mahmoudissmail/ionic2Accordion

.html

<ion-content padding>
  <ion-list>
    <ion-list-header>
      Ionic 2 Accordion Example.
    </ion-list-header>
    <ion-item padding *ngFor="let d of data" (click)="toggleDetails(d)"><ion-icon color="primary" item-right [name]="d.icon"></ion-icon>
      {{d.title}}
      <div *ngIf="d.showDetails">{{d.details}}</div>
    </ion-item>
  </ion-list>
</ion-content>

.ts

export class HomePage {

  data: Array<{title: string, details: string, icon: string, showDetails: boolean}> = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 10; i++ ){
      this.data.push({
          title: 'Title '+i,
          details: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
          icon: 'ios-add-circle-outline',
          showDetails: false
        });
    }
  }

  toggleDetails(data) {
    if (data.showDetails) {
        data.showDetails = false;
        data.icon = 'ios-add-circle-outline';
    } else {
        data.showDetails = true;
        data.icon = 'ios-remove-circle-outline';
    }
  }

thanks for @LPeteR90.

Answer 2

EDIT:

Ok, I think I've figured it out. This tutorial helped me a lot, so I would recommend reading it also.

I've split my code up into components, where

@Component({
    directives: [DataCards], 
    templateUrl: 'build/pages/data-list/data-list.html'
})

export class DataList {

    public dataList: Data[];

    constructor() {
        this.dataList = [
            new Data('Test title', 'Test Details 1, 2, 3, 4, 5', false), 
            new Data('Second title', 'These are the details for my second title :)', false)
    ];
}

}

and the corresponding HTML

<ion-content class="cards-bg">
   <data-cards [data]="dataList"></data-cards>
</ion-content>

contain my custom component data-cards. data-cards has an input parameter data, through which the list of data is passed. To be able to use the data-cards component, you need to set the directives attribute. Data is a class containing everything you need in an item of your list.

export class Data {
    constructor(public title: string, public details: string, public showDetails: boolean) {}
}

The component data-cards itself has the selector and inputs attributes set, so the component can be used from the data-list HTML. The function toggleDetails is used to toggle whether the detail part of a list entry is shown.

@Component({
    selector: 'data-cards',
    inputs: ['data'],
    templateUrl: 'build/pages/data-cards/data-cards.html'
})

export class DataCards {
    public data: Data[];
    constructor() {}

    toggleDetails(data: Data) {
        if (data.showDetails) {
            data.showDetails = false;
        } else {
            data.showDetails = true;
        }
    }
}

Finally, in the data-cards template file, I build up the list of data using *ngFor and make the details <div> element's visibility dependent on the data showDetails attribute with *ngIf.

<ion-card *ngFor="let d of data">
    <h1>{{d.title}}</h1>
    <button (click)="toggleDetails(d)">+</button>
    <div *ngIf="d.showDetails">{{d.details}}</div>
</ion-card>

To get everything to work you will need to add some imports to my code, since e.g. the DataList class depends on DataCards and Data.

I also recommend changing the style of the data-cards template... Without being styled, it doesn't look beautiful exactly :)

UNEDITED ORIGINAL ANSWER:

I'm working on something similar right now. I think this can be implemented by using cards and *ngIf.

So I think I will do something like

<ion-card>
    <h2>Card Title</h2>
    <button (click)="toggleDetails()">+</button>
    <div *ngIf="showDetails">
        Here are some details for the title. 
    </div>
</ion-card>

In the toggleDetails() i would set the showDetails variable to true...

This is just my approach (and untested), I'm going to edit my answer when I'm done implementing it.