Creating Collapsible Panes with the Panel Accordion Component
Another component that enables you to create collapsible panes is panel accordion. A series of af:showDetailItem components inside af:panelAccordion make up the accordion panes, with one af:showDetailItem component corresponding to one pane. The pane contents are the children components inside each af:showDetailItem.
You can use more than one af:panelAccordion component in a page, typically in different areas of the page, or nested. After adding the af:panelAccordion component, insert a series of af:showDetailItem components to provide the panes, using one af:showDetailItem for one pane. Then insert components into each af:showDetailItem to provide the pane contents.
Note: The af:showDetailItem component has a StretchChildren property that you can set to stretch the first child of the af:showDetailItem component, if the child is a stretchable component.