Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Accordion: Features


You can set expanded to pre-expand a certain invoker.

Slots Order

The invoker and content slots are ordered by DOM order.

Multiline header

A header can be multiline.

Distribute New Elements

Below, we demonstrate how you could dynamically add a new invoker + content.

One way is by creating the DOM elements and appending them as needed.

Inside your lion-accordion extension, an example for appending nodes on a certain button click:

__handleAppendClick() {
  const accordionAmount = this.children.length / 2;
  const invoker = document.createElement('h4');
  const button = document.createElement('button');
  button.innerText = `header ${accordionAmount + 1}`;
  invoker.setAttribute('slot', 'invoker');
  const content = document.createElement('p');
  content.setAttribute('slot', 'content');
  content.innerText = `content ${accordionAmount + 1}`;

The other way is by adding data to a Lit property where you loop over this property in your template. You then need to ensure this causes a re-render.

__handlePushClick() {
  const accordionAmount = this.children.length;
  myCollection = [
      invoker: `header ${accordionAmount + 1}`,
      content: `content ${accordionAmount + 1}`,

Make sure your template re-renders when myCollection is updated.

<lion-accordion id="pushAccordion">
  ${ => html`
  <h4 slot="invoker">
  <p slot="content">${item.content}</p>