<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/*
* Since <animated-collapse> uses "overflow: hidden" for
* its animation, margins do not collapse. So you should
* remove collapsible margins.
*/
animated-collapse > p {
margin-top: 0;
margin-bottom: 0;
}
</style>
<script type="module">
import AnimatedCollapse from 'https://yuheiy.github.io/animated-collapse-element/animated-collapse-element.js'
customElements.define(AnimatedCollapse.is, AnimatedCollapse)
toggle.onclick = () => {
// You can get the state and set from
// `AnimatedCollapse#expanded`
collapse.expanded = !collapse.expanded
}
</script>
</head>
<body>
<button id="toggle">content</button>
<animated-collapse id="collapse">
<p>Place your content here!</p>
</animated-collapse>
</body>
</html>You can also control collapsing state from
expanded attribute. If
expanded attribute is not specified, it is collapsed.
<animated-collapse>
<p>Place your content here!</p>
<p>This element is collapsed by default.</p>
</animated-collapse>If
expanded attribute is specified, it is expanded.
<animated-collapse expanded>
<p>Place your content here!</p>
<p>This element is expanded by default.</p>
</animated-collapse>The animation is built by CSS
transition property. You can pass custom values for
transition property as Custom properties.
animated-collapse {
--animated-collapse-duration-expand: 1.6s;
/* default value: 0.25s */
--animated-collapse-duration-collapse: .8s;
/* default value: 0.2s */
--animated-collapse-easing-expand: cubic-bezier(0.860, 0.000, 0.070, 1.000);
/* default value: cubic-bezier(0.4, 0, 0.2, 1) */
--animated-collapse-easing-collapse: cubic-bezier(0.075, 0.820, 0.165, 1.000);
/* default value: cubic-bezier(0.4, 0, 0.2, 1) */
}You can listen some events.
<animated-collapse> element dispatches the next
CustomEvents.
const animatedCollapse = document.querySelector('animated-collapse')
animatedCollapse.addEventListener(
'expandstart',
() => console.log('expanding is started')
)
animatedCollapse.addEventListener(
'expandend',
() => console.log('expanding is ended')
)
animatedCollapse.addEventListener(
'collapsestart',
() => console.log('collapsing is started')
)
animatedCollapse.addEventListener(
'collapseend',
() => console.log('collapsing is ended')
)Received event: