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


ionic-academy-start

You must be a Member to view this Quick Win

Access all courses and lessons, track your progress, connect with Developers & build awesome Ionic Apps.

Read Next..

Sending Emails in Ionic with Image Attachments Recently one of the students of the Ionic Academy had the problem to send out emails using Ionic from his app with attachments, especially images.I...
Ionic Image Filter Like Instagram Using WebGL Filters Adding filters to your images inside an Ionic app can be challenging as the calculations are not really trivial. Therefore, using an external package ...
Ionic Fingerprint Login Almost all newer devices currently have some sort of fingerprint our Touch ID authentication already build in. If you want to protect your app with th...

Read Next..

Ionic Local Notifications (Schedule, Payload and Callback) Many times you want to notify your users about events, but perhaps it is not worth implementing real push notifications. For those cases we can easily...
How to Add Watermarks to Your Ionic Images We've had several articles around using images in the past, but one question was asked many times and was unanswered until today: How to add a waterma...
Ionic Image Filter Like Instagram Using WebGL Filters Adding filters to your images inside an Ionic app can be challenging as the calculations are not really trivial. Therefore, using an external package ...