Accordion

Usage
Head over to sc-accordion-item for more details about properties, events and methods on that component.

Single (default)

By default only one <sc-accordion-item> element inside a <sc-accordion> can be expanded at any given time. When clicked on a different <sc-accordion-item>, the active one will be collapsed and the clicked one will be expanded.

<sc-accordion id="inner-accordion">
  <sc-accordion-item heading="I" active>
    Add <code>active</code> attribute to open an item by default.
  </sc-accordion-item>
  <sc-accordion-item heading="Am">
    Lorem ipsum dolor sit
  </sc-accordion-item>
  <sc-accordion-item heading="Groot">
    Lorem ipsum dolor sit
  </sc-accordion-item>
</sc-accordion>

Multiple

There are times when you need multiple items to be open at the same time. Just add multiple attribute to the <sc-accordion> element.

<sc-accordion multiple>
  <sc-accordion-item heading="We">
    Lorem ipsum dolor sit
  </sc-accordion-item>
  <sc-accordion-item heading="Are">
    Lorem ipsum dolor sit
  </sc-accordion-item>
  <sc-accordion-item heading="Groot">
    Lorem ipsum dolor sit
  </sc-accordion-item>
</sc-accordion>

Nested

Nested accordions are also possible, the components will figure out which <sc-accordion> component is the user interacting with.

<sc-accordion>
  <sc-accordion-item heading="Accordions can be nested too">
    Lorem ipsum dolor sit

    <sc-accordion id="inner-accordion">
      <sc-accordion-item heading="Nested">
        Lorem ipsum dolor sit
      </sc-accordion-item>

      <sc-accordion-item heading="Accordions">
        Lorem ipsum dolor sit
      </sc-accordion-item>
      <sc-accordion-item heading="Are pretty cool">
        Lorem ipsum dolor sit
      </sc-accordion-item>
    </sc-accordion>

  </sc-accordion-item>
  <sc-accordion-item heading="Yayyy"">
    Lorem ipsum dolor sit
  </sc-accordion-item>
</sc-accordion>

Customise it

There are 2 slots you can use to customise each item. slot="heading" and slot="arrow"

<sc-accordion>
  <sc-accordion-item>
    <div slot="heading">
      <mark>
        Use <code>slot="heading"</code> to customise heading
      </mark>
    </div>
    Lorem ipsum dolor sit
  </sc-accordion-item>
  <sc-accordion-item heading="Customise arrow">
    <div slot="arrow" style="text-align: center; color: red; width: 60px; height: 60px; font-size: 60px; line-height: 60px">
      &#10084;
    </div>
    Use <code>slot="arrow"</code> to customise arrow
  </sc-accordion-item>
</sc-accordion>
Props
Name
Description
Type
Default
Namemultiple
Description

If multiple <sc-accordion-item>s can open at the same time

Typeboolean
Defaultfalse

Comments

Leave your thoughts here and it becomes a GitHub issue! Thanks to the magic of Utterances