Accordion: Features

Expanded

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');
  invoker.appendChild(button);
  const content = document.createElement('p');
  content.setAttribute('slot', 'content');
  content.innerText = `content ${accordionAmount + 1}`;
  this.append(invoker);
  this.append(content);
}

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 = [
    ...myCollection,
    {
      invoker: `header ${accordionAmount + 1}`,
      content: `content ${accordionAmount + 1}`,
    },
  ];
  renderMyCollection();
}

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

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