b-collapsible

You guessed it, <b-collapsible> creates a collapsible block of content, collapsed by default. You can set the opened attribute to show the content, or use its toggle() method. Transition duration can be specified in milliseconds with the duration attribute.

Usage

<button id="toggle-collapsible" aria-controls="collapsible" aria-expanded="false">Toogle collapsible</button>
<b-collapsible id="collapsible" aria-labelledby="toggle-collapsible" duration="100">
    <div>
        Lorem ipsum...
    </div>
</b-collapsible>
<script type="text/javascript">
    window.addEventListener("WebComponentsReady", function() {
        var btn = document.getElementById('toggle-collapsible'),
            collapsible = document.getElementById('collapsible');

        btn.addEventListener('click', function() {
            collapsible.toggle();
            btn.setAttribute('aria-expanded', collapsible.opened ? 'true' : 'false');
        }, false);
    });
</script>

Styling

Don't style <b-collapsible> directly (in particular, avoid padding/margin/border as it will ruin the transition effect), style its content instead.

Accessibility

A11y attributes to be used are shown in the sample above.

API

Attributes

• opened: if set, the collapsible will show.
• duration: transition duration in milliseconds.
• horizontal: if set, the collapsible will collapse in width instead of height.

Methods

• toggle()

Events

• b-collapsible-toggle: cancelable event fired when the collapsible is about to be shown/hidden.
• b-collapsible-show: cancelable event fired when the collapsible is about to be shown.
• b-collapsible-hide: cancelable event fired when the collapsible is about to be hidden.