How to create an Accordion List with Ionic 4?

Question

Ask me is how to create a "Accordion List ".

I need it for a few sections with the example "About us" "Services" that at the moment I click, I will display information.

I hope you can help me. is in ionic 4

Answer 1

This is not an included component within Ionic 4 but it's not a hard problem to solve.

You can use Angular Material's expansion panel if you want to use an off the shelf component.

If you just want a quick overview it would be something like this:

1. Generate a component
2. Set a standard height for the panels expansion (annoying but its a limitation of CSS itself so you have to do this)
3. Use css to handle the hiding or expanding + animation
4. Use a snippet of code to toggle the expanded state
5. Depending on the type of accordion (allow one open or many open at a time) you might also want to write another snippet of code to collapse all other panels when a new one is opened.

Bonus considerations for deep linking support:

1. Update the #fragment in the url when each panel is opened
2. Check for a matching #fragment on page load and expand it

Josh has a tutorial on it - Creating an Accordion List in Ionic.

There is also a detailed tutorial over on Mastering Ionic.