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.