Collapse / Accordion
The collapse component allows to collapse any elements you want. You can make an accordion with it for example.
This component is inspired by the Collapse component from Bootstrap.
@import 'compotes/css/collapse';
import { Collapse } from 'compotes'
const collapse = new Collapse('#my-collapse')
It is recommended to put an id
to the element you want to collapse. To all your trigger buttons, add an aria-controls
attribute refering to the id
of the collapse.
<button class="c-collapse-trigger" aria-controls="my-collapse">
Trigger collapse
</button>
<div class="c-collapse" id="my-collapse">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus.
</p>
</div>
To make the collapse open by default, add the c-collapse--show
class on the collapse element.
<button class="c-collapse-trigger" aria-controls="my-collapse">
Trigger collapse
</button>
<div class="c-collapse c-collapse--show" id="my-collapse">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus.
</p>
</div>
You can set the CSS transition to the collapse element. The component will show and hide with the duration of your transition automatically.
Accessibility
To ensure accessibility feature, the component will inject aria-expanded
to all trigger elements. This allow the user to know if the collapse is expanded or not. The user also knows what element it refer thanks to the aria-controls
attribute.
Options
You can change some options from the component.
import { Collapse } from 'compotes'
const collapse = new Collapse('#my-collapse', {
init: true,
initAccessibilityAttrs: true,
initEvents: true
})
init
(boolean): Init the component on creationinitAccessibilityAttrs
(boolean): Init accessibility attributes on the componentinitEvents
(boolean): Init events on the component
Methods
The collapse component provides several methods allowing you to control the component programatically.
import { Collapse } from 'compotes'
const collapse = new Collapse('#my-collapse')
collapse.show()
init()
: Init the componentinitAccessibilityAttrs()
: Init accessibility attributesinitEvents()
: Init component eventsupdate()
: Update collapse trigger statushide()
: Hide elementshow()
: Show elementtoggle()
: Toggle elementdestroyEvents()
: Destroy the component eventsdestroy()
: Destroy the component
Data
You can access data from the component like this:
import { Collapse } from 'compotes'
const collapse = new Collapse('#my-collapse')
console.log(collapse.isExpanded)
options
(options object): Get options used to init the componentisExpanded
(boolean): If the collapse element is expanded or notisCollapsing
(boolean): If the collapse is in his collapsing animation
Events
You can listen to emitted events directly on the collapse element like this:
import { Collapse } from 'compotes'
const collapseElement = document.getElementById('my-collapse')
const collapse = new Collapse(collapseElement)
collapseElement.addEventListener('c.collapse.init', (e) => {
console.log(e.detail)// collapse object
})
c.collapse.init
: On component initc.collapse.show
: Show animation is launchc.collapse.shown
: The collapse element is shownc.collapse.hide
: Hide animation is launchc.collapse.hidden
: The collapse element is hiddenc.collapse.destroy
: On component destroy