<p>
This component is only demonstrative to use collapsible script in fractal component. In Magento we can use collapsible Magento-UI component (example - gift cards on cart view in theme); Check Component's README (Notes) for more information.
</p>
<div class="collapsible">
<button class="button collapsible__trigger" aria-expanded="false">
Collapsible trigger
</button>
<div class="collapsible__content">
Collapsible content goes here
</div>
</div>
<script type="text/javascript">
const collapsible = document.querySelector('.collapsible');
new Collapsible(collapsible);
</script>
<p>
This component is only demonstrative to use collapsible script in fractal component. In Magento we can use collapsible Magento-UI component (example - gift cards on cart view in theme);
Check Component's README (Notes) for more information.
</p>
<div class="collapsible">
<button
class="button collapsible__trigger"
aria-expanded="false"
>
{{ triggerText }}
</button>
<div class="collapsible__content">
{{ contentText }}
</div>
</div>
<script type="text/javascript">
const collapsible = document.querySelector('.collapsible');
new Collapsible(collapsible);
</script>
{
"triggerText": "Collapsible trigger",
"contentText": "Collapsible content goes here"
}
.collapsible {
&__trigger {
&[aria-expanded="false"] + .collapsible__content {
display: none;
}
&[aria-expanded="true"] + .collapsible__content {
display: block;
}
}
}
'use strict';
class Collapsible { // eslint-disable-line
constructor(wrapper) {
this.wrapperElem = wrapper;
this.trigger = this.wrapperElem.querySelector('.collapsible__trigger');
this.content = this.wrapperElem.querySelector('.collapsible__content');
this.listener();
}
toggle() {
let currentState = this.trigger.getAttribute('aria-expanded'),
newState = currentState === 'true' ? 'false' : 'true';
this.trigger.setAttribute('aria-expanded', newState);
}
listener() {
this.trigger.addEventListener('click', () => {
this.toggle();
})
}
}
This component is only demonstrative to use collapsible script in fractal component. In Magento we can use collapsible Magento-UI component (example - gift cards on cart view in theme); Check Component’s README (Notes) for more information.
If you want to use this script in component, please add:
<script type="text/javascript">
const collapsible = document.querySelector('.collapsible');
new Collapsible(collapsible);
</script>to the template. Check template of this component to use proper css classes, you don’t need to use them in Magento.