Building an Accordion List with Ionic [v4]

While the Ionic list with all it’s options and sliding elements is a great component, sometimes you need a more advanced behaviour like a classic accordion.

We’ve talked about building an Accordion with Ionic 3 previously and now it’s time to talk about the mandatory changes for v4. In detail this means we have to tweak our UI, we will use a custom Angular component and of course CSS variables to achieve the desired behaviour like below.

ionic-4-accordion-animated

This Quick Win is based on some dummy JSON structure but of course you can load your own API information and adapt the structure you have as well!


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..

How to Pass Data with Angular Router in Ionic When you are migrating your Ionic 3 app to Ionic 4 one of the biggest problems you will face is converting your logic to the new routing. Especially p...
Passing Data to Ionic Modals, Pages & Popover Every Ionic app consist of different pages and a solid navigation is crucial for your app. With Ionic 4 the routing changed to the standard Angular ro...
How to Build Your First Ionic 4 App with API Calls So you just noticed that Ionic 4 was released and you finally want to get started with cross platform app development? Well today is your days because...

Read Next..

How to Combine Ionic 4 Tabs and Side Menu Navigation Creating a tab bar with Ionic 4 is pretty easy, adding a side menu is a bit more tricky in terms of the structure but still quite easy. But when it co...
How to Pass Data with Angular Router in Ionic When you are migrating your Ionic 3 app to Ionic 4 one of the biggest problems you will face is converting your logic to the new routing. Especially p...
How to Add A Side Menu to Your Ionic 4 App In this Quick Win we will add a side menu to our Ionic 4 app starting from a blank template using the CLI to generate our pages and new Angular Router...

Leave a Reply

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