Accordion List with Ionic

ionic-accordion-header

An Accordion list is a very classic UI pattern, for which you can find about 100 jQuery solutions. But we want to develop an accordion list with Ionic, so we will only rely on simple JavaScript and Angular syntax for this accordion list!

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

If you don’t know what an accordion list is, it’s basically a list with multiple levels. You can dig into elements of the list to drill down deeper, not by opening a new page but by opening items like child items inside one item.

Once we are done with our Ionic Accordion it will look like in the image below!
ionic-accordion

Setting up a new Ionic App

We start very simple with a clean Ionic app, so go ahead and create a new project like this:

Inside our app we will load some JSON data from a file. To load data we need the HttpModule, and therefore we need to import it to our module in src/app/app.module.ts like this:

As said before we also need some data for our list, so I created a simple JSON structure with a few levels and different depth so we can build a more flexible accordion. The information of our app will be like inside a Pizza ordering app, the texts are just random from Bacon Ipsum.

Create a new file information.json inside your assets folder and insert:

Now we got everything we need for our Ionic accordion list, so let’s dive into the fun!

Implement the Accordion View

As we can see from our data we can have 3 levels:

  • 1. Level: Only Sections with children, no items
  • 2. Level: Subsections which can have children, but could also be items
  • 3. Level: Only items

This means we need a way to drill down into the 2nd and 3rd level of our data, but we also need to be able to “add” items from the second level if they have no children.

Of course this is just an example and your data will be completely different, but data won’t be easy to handle most of the time so it’s a good idea to get your brain used to more complex data.

Inside our class we first of all load our information from our file into an array information and implement 2 functions to toggle a section or a child of a section.

In both cases we use a field inside the json which is not existing at the moment, but that’s no problem. This way we can easily track which sections and children are currently open, we can even close the higher hierarchy but the lower could still be open.

So by doing this trick we lose no information and get great flexibility!

Go ahead and put the code into your src/pages/home/home.ts:

The most interesting part of the accordion list is of course the UI, and here things get a little bit tricky and not super easy to understand.

In general we have 3 nested Ionic lists. If one element has children, it will be displayed as an ion-list-header, otherwise it will be just an ion-item with a click event (to add it to your cart for example).

The *ngFor loops also carry the index of the current object which we can then use to pass to our click functions to set the JSON property for an element.

This would not yet give us the effect we want, therefore we need to add *ngIf to our lists to display them with a condition, and check for the according open field inside the JSON!

By doing this we can hide/show a complete list very easily. We don’t need to take care of moving or resizing other objects, Ionic handles everything for us already! The list will automatically grow or shrink once we open a section.

The only thing we haven’t added here are animations, so the elements will more or less “pop” immediately. There’s a course inside the Ionic Academy all about animations, so if you are a member you can check that out and combine the accordion with some animations to make it look even better!

Although we could talk for hours about the HTML for our view here, let’s add this stuff to our src/pages/home/home.html for now:

If you have any specific questions about elements or utilities I used here just let me know below!

Most of what we used is standard Ionic, but we also added some conditional classes to our sections and sub sections.
First, the icon will change depending on whether a row is open (expanded) or not. Second, we apply a conditional style using ngClass on our sections.

With ngClass we can add CSS attributes depending on the value of an expression, in our case again the state of the current row. By using this method we can give our row a nice yellow taint once it is open and active, and the accordion will look even better!

Also, I had to set some styling for the list or a label because the general Ionic styles were preventing the Accordion UI like I wanted. Now go ahead and add these styles to your src/pages/home/home.scss:

We are finally done!

The hardest part here was the HTML view, and it’s about experimenting with the different elements and CSS stylings to achieve your specific accordion type.

I hope this quick win gives you an idea how you can create an Accordion with Ionic and Angular, and everything without jQuery!

You can find a video version of this article below.


Get the free 7 day Ionic Crash Course to learn how to:

  • Get started with Ionic
  • Build a Tab Bar navigation
  • Make HTTP calls to a REST API
  • Store Data inside your app
  • Use Cordova plugins
  • Style your Ionic app

The course is free, so there's nothing you can lose!

Powered by ConvertKit
  • rodolfo antonio villalon leiva

    thank. from from chile. my english is very primitive.

  • Alonso

    Thanks, but this examplen in another page, not home?

  • Alonso

    A question. Example similar, but call json from the web?

  • Jordy Sabimana

    Hello
    has anyone encoutered this bug : Property ‘http’ is declared but never used.?

    • Maike Mota

      This is not a Bug, the ionic compiler emits this warning when an import is never used (or called just in the html)

  • Mangojuice

    Is it possible to automatically open the first level for example? So when you get to the page the drinks are already open.

  • Florian Stl

    Hello, how can I do a list into the accordion detail pls?

  • Nuno

    great explanation. How to close all open itens, when click another first level item?

  • Curtis

    Hey, wonderful tutorial/walkthrough. One problem though. When you change the Direct Add Fallback from a button to a checkbox, the entire button is nothing but whitespace. As if it calculated for something, but a boolean of sorts is preventing the html that goes inside of the ion-item.