Accordion List with Ionic [v3]

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!

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


The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock

Current member? LOGIN


Comments on Accordion List with Ionic [v3]

  1. rodolfo antonio villalon leiva says:

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

  2. Alonso says:

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

  3. Alonso says:

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

    1. Raul García says:

      its the same way

  4. Jordy Sabimana says:

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

    1. Maike Mota says:

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

  5. Mangojuice says:

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

  6. Florian Stl says:

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

  7. Nuno says:

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

    1. abdenor dexter says:

      declare open = -1;

      toggleSection(i) {

      if (this.open >= 0) {//
      this.information[this.open].open = !this.information[this.open].open;
      }

      //lecture de donnée si l’action n’est pas la fermeture de l’accordion
      if (!this.information[i].open) {……your query or TODO……..}
      if (this.open != i) {
      this.information[i].open = !this.information[i].open;
      }
      this.open = i;
      }

    2. Зорак Бракович says:

      if this.open => another.close

      Just add it to bottom of index html

  8. Curtis says:

    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.

  9. abdenor dexter says:

    hello, very awesome, and thank you really! just a question, how to close all open items on selecting one other?

  10. raj malhotra says:

    What to do if there children is empty in accordion list and how to display a message there?

  11. Ayusma Pattanayak says:

    while installing it in to device it is giving error- “Property ‘open’ doest not exist on type”..

  12. Ayusma Pattanayak says:

    while installing it in android device,it is giving error “Property open does not exist on type”..

  13. Sufiyan Adi says:

    hi, great tutorial, but can u do version with firebase?

  14. Tulio Matos says:

    Hello, how do I make these buttons work using a custom pipe? When I click the button to expand the category it does not return anything to me.

  15. Prince Dosi says:

    how to make open a single list item at once and make opened item close automatically on clicking another

Leave a Reply

Your email address will not be published. Required fields are marked *