Collapse
This helper enhances the expand/collapse animations which are used to expand or collapse an element.
This helper will set the --simple-animation-collapse-max-height
CSS variable to the height of the element. This will ensure that when the element is being animated the correct height is used.
Including the Helper
To include this helper in your code you can import it like this:
import { Collapse } from '@simple-web-utilities/simple-animation';
Running the Helper
When included this helper is automatically run on page load.
The helper can also be manually triggered by calling the initialize
method.
Collapse.initialize();
Collapse HTML Elements
This helper will look for any HTML elements that contains the attribute data-sa-collapse
. The value of this attribute should be a selector (ID or CSS) that will be used to find the element that will be collapsed.
<button data-sa-collapse="#collapse">Collapse</button>
<div id="collapse" class="simple-animation sa-collapse">...</div>
In the case that multiple elements match the selector, only the first element will be used.
What The Helper Does
When the helper is run it will do the following:
- Find all elements that contain the attribute
data-sa-collapse
. - For each element found:
- Find the collapse element that matches the selector in the
data-sa-collapse
attribute. - Set the
--simple-animation-collapse-max-height
CSS variable on the collapse element to the height of the collapse element. - Add a click event listener to the element that will toggle the
sa-collapse-up
andsa-expand-down
classes on the collapse element.
- Find the collapse element that matches the selector in the
By setting the --simple-animation-collapse-max-height
CSS variable on each collapse element the expand/collapse animations will run correctly.