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:
- Generate a component
- Set a standard height for the panels expansion (annoying but its a limitation of CSS itself so you have to do this)
- Use css to handle the hiding or expanding + animation
- Use a snippet of code to toggle the expanded state
- 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:
- Update the #fragment in the url when each panel is opened
- 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