How to create an Accordion List with Ionic 4?


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


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.

Answered By – rtpHarry

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published