How to Create Ionic 2 Accordion List

by Didin J. on Feb 02, 2017

How to create our own Ionic 2 Accordion List easily without using any plugins just pure simple Angular 2 code.

1. Create New Ionic 2 Project

As usually, we always starting a tutorial by creating a new project. Before we started the new project, make sure you have update your Ionic and Cordova to the latest version.

sudo npm install -g ionic
sudo npm install -g cordova

"Good news! 7 days ago Ionic 2 Final was announced"

Now, go to your projects or examples folders then start the new blank project by this command.

ionic start Ionic2Accordion blank --v2

2. Create a List of Objects

Open and edit file "src/pages/home/home.ts" declare an array variable and fill it with some data. We will use fields title and description. So, our "home.ts" will like this.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  diseases = [
    { title: "Type 1 Diabetes", description: "Type 1 diabetes is an autoimmune disease in which the body’s immune system attacks and destroys the beta cells in the pancreas that make insulin." },
    { title: "Multiple Sclerosis", description: "Multiple sclerosis (MS) is an autoimmune disease in which the body's immune system mistakenly attacks myelin, the fatty substance that surrounds and protects the nerve fibers in the central nervous system." },
    { title: "Crohn's & Colitis", description: "Crohn's disease and ulcerative colitis (UC), both also known as inflammatory bowel diseases (IBD), are autoimmune diseases in which the body's immune system attacks the intestines." },
    { title: "Lupus", description: "Systemic lupus erythematosus (lupus) is a chronic, systemic autoimmune disease which can damage any part of the body, including the heart, joints, skin, lungs, blood vessels, liver, kidneys and nervous system." },
    { title: "Rheumatoid Arthritis", description: "Rheumatoid arthritis (RA) is an autoimmune disease in which the body's immune system mistakenly begins to attack its own tissues, primarily the synovium, the membrane that lines the joints." }
  ];

  constructor(public navCtrl: NavController) {

  }

}

Next, open and edit "src/pages/home/home.html" to apply this list of objects to the view. Replace all default text inside "content" tag with "ion-list" and put loops of an array inside "ion-item".

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 2 Accordion
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let d of diseases" text-wrap>
      {{d.title}}
      <div>{{d.description}}</div>
    </ion-item>
  </ion-list>
</ion-content>

Now, you can run this app in the browser by this command.

ionic serve -l

"-l" or "--lab" is additional option to make ionic app displayed in the browser as multiple platforms (iOS, Android, and Windows).

This temporary result will look messy and too long in the list.

3. Make Accordion List

This time to make long and mess list simplified and arranged by make list as an Accordion. Firstly, open and edit "home.ts" and add this variable.

shownGroup = null;

Then, create 2 functions for toggle accordion on and off and for show and hide list detail.

toggleGroup(group) {
    if (this.isGroupShown(group)) {
        this.shownGroup = null;
    } else {
        this.shownGroup = group;
    }
};
isGroupShown(group) {
    return this.shownGroup === group;
};

Next, open and edit "home.html" and add those function in "ion-item" and "div" of description.

<ion-list>
  <ion-item *ngFor="let d of diseases; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">
    <h3>
      {{d.title}}
      <ion-icon color="success" item-right [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
    </h3>
    <div *ngIf="isGroupShown(i)">{{d.description}}</div>
  </ion-item>
</ion-list>

As you can see, we add click to function "toggleGroup(i)" which "i" is an index of an array. We also add "ngClass" to check if function "isGroupShown" pointed to index. There is an icon on the right of title which will change the status of accordion on or off.

Now, let see the results in the browser. You can expand detail by click on the list item.