Class

AashAccordionSectionComponent

AashAccordionSection~AashAccordionSectionComponent(props)

Generates the header and region of an accordion section.

The component supports a sliding animation by setting the height attribute of the region on two occasions if a transition for height is defined for the region.

When the region is to be expanded, the component calculates the (expected) height of the region and sets its style's height to that value. When the transition has ended, the explicit height value is removed again, thus allowing the section to adjust to the size of its content if that content changes.

When the region is to be collapsed, the component calculates the current height of the region and assigns the result to the style's height for one animation frame. Together with a CSS rule that requests height: 0 if the region is hidden, this triggers a transition from the calculated height to 0.

During either transition, the attribute data-transitioning is set on the region.

Note that adding padding to the section breaks the transition. Therefore, an extra div is generated as child of the section that contains the slot content. Use this div to add any padding.