Collapsible: Use Cases
Default open
Add the opened attribute to keep the component default open.
export const defaultOpen = () => html`
<lion-collapsible opened>
<button slot="invoker">More about cars</button>
<div slot="content">
Most definitions of cars say that they run primarily on roads, seat one to eight people, have
four tires, and mainly transport people rather than goods.
</div>
</lion-collapsible>
`;
Most definitions of cars say that they run primarily on roads, seat one to eight people, have
four tires, and mainly transport people rather than goods.
Methods
There are the following methods available to control the extra content for the collapsible.
toggle(): toggle the extra contentshow(): show the extra contenthide(): hide the extra content
export const methods = ({ shadowRoot }) => html`
<lion-collapsible id="car-collapsible">
<button slot="invoker">More about cars</button>
<div slot="content">
Most definitions of cars say that they run primarily on roads, seat one to eight people, have
four tires, and mainly transport people rather than goods.
</div>
</lion-collapsible>
<section style="margin-top:16px">
<button @click="${() => shadowRoot.querySelector('#car-collapsible').toggle()}">
Toggle content
</button>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').show()}">
Show content
</button>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').hide()}">
Hide content
</button>
</section>
`;
Events
lion-collapsible fires an event on invoker click to notify the component's current state. It is useful for analytics purposes or to perform some actions while expanding and collapsing the component.
@opened-changed: triggers when collapsible either gets opened or closed
export const events = ({ shadowRoot }) => html`
<div class="demo-custom-collapsible-state-container">
<strong id="collapsible-state"></strong>
</div>
<lion-collapsible
@opened-changed=${ev => {
const collapsibleState = shadowRoot.getElementById('collapsible-state');
collapsibleState.innerText = `Opened: ${ev.target.opened}`;
}}
>
<button slot="invoker">More about cars</button>
<div slot="content">
Most definitions of cars say that they run primarily on roads, seat one to eight people, have
four tires, and mainly transport people rather than goods.
</div>
</lion-collapsible>
`;