How it works
Make the whole header section tappable to trigger the expand/collapse action.
To keep content related within their container, the following two changes happen:
- When the accordion is open, the arrow icon points up; when collapsed, the icon points down when collapsed
- The divider line stays at the bottom of each section when expanded, which differentiates each section
Web Accordion
Example of Web open and closed
React Native
Example of React Native open and closed