Skip to main content

Expand / Collapse

These animations allow the expanding and collapsing of elements.

Started an Element Collapsed​

To have an element start in the collapsed state (hidden) add the sa-collapsed class to the element.

Expand Down​

Expand an element down from the top to its full height.

info

Unless the JavasScript Helpers have been included this animation will expand the element down to a max height of 1000px. This can cause the animation to appear to run too quickly for short elements. Including the Collapse JavasScript Helper will set the correct max height for the element.

Optionally you can set the max height of the element manually by setting the --simple-animation-collapse-max-height CSS variable on the element.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Options
<div className="simple-animation sa-expand-down"></div>

Collapse Up​

Collapse an element up from its full height to the top.

info

Unless the JavasScript Helpers have been included this animation will collapse the element up from a max height of 1000px. This can cause the animation to appear to be delayed before running for short elements. Including the Collapse JavasScript Helper will set the correct max height for the element.

Optionally you can set the max height of the element manually by setting the --simple-animation-collapse-max-height CSS variable on the element.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Options
<div className="simple-animation sa-collapse-up"></div>