Accordeon

A stacked set of interactive headings that when triggered, reveal an associated section of content.

This component uses the collapse component as a foundation to collapse/expand its content.

Basic example

Accordeons are built using the Accordeon component, and with defined item parts. The item part will just be a Collapse component under the hood.

<div o-component="accordeon">
    <article o-part="item">
        <h3>
            <button o-part="trigger">...</button>
        </h3>

        <div o-part="content">...</div>
    </article>

    <article o-part="item">
        <h3>
            <button o-part="trigger">...</button>
        </h3>

        <div o-part="content">...</div>
    </article>
</div>

With only one opened at a time

The accordeon component accepts a single prop, which, when used, determines whether the component should allow multiple "items" opened at the same time or not.

<div o-component="accordeon" o-data='{ "single": true }'>
    <article o-part="item">
        <h3>
            <button o-part="trigger">...</button>
        </h3>

        <div o-part="content">...</div>
    </article>

    <article o-part="item">
        <h3>
            <button o-part="trigger">...</button>
        </h3>

        <div o-part="content">...</div>
    </article>
</div>

Component API

Anatomy

Name Type Parent Ideal tag Description
accordeon component - - The component.
item part accordeon - A collapsible element.
trigger part item button The element in charge of toggling the opened/closed state of the item.
content part item - The element of the item for which the contents will be consequentially opened or closed.

Props

Accordeon

Name Default Description
single false boolean
Determines if only one or multiple items are allowed to be opened at the same time.

Item

As the item part, under the hood is just a collapse, it's best to consult it's own documentation page.

Public props

Accordeon

Name Description
$single: boolean Property that allows manuall control of the "single" state of the component.
$open(keyOrIndex: string | number): void Triggers a targeted (by key or by index) item's open action.
$close(keyOrIndex: string | number): void Triggers a targeted (by key or by index) item's close action.
$toggle(keyOrIndex: string | number): void Toggles a targeted (by key or by index) item's open/close actions.
$find(keyOrIndex: string | number): CollapseBoyoElement | null Find an item (by key or by index).
   
$openByKey(key: string): void Triggers a targeted (by key) item's open action.
$closeByKey(key: string): void Triggers a targeted (by key) item's close action.
$toggleByKey(key: string): void Toggles a targeted (by key) item's open/close actions.
$findByKey(key: string): CollapseBoyoElement | null Find an item (by key).
   
$openByIndex(index: number): void Triggers a targeted (by index) item's open action.
$closeByIndex(index: number): void Triggers a targeted (by index) item's close action.
$toggleByIndex(index: number): void Toggles a targeted (by index) item's open/close actions.
$findByIndex(index: number): CollapseBoyoElement | null Find an item (by index).

Note:

  • key: refers to the element's $key public property.
  • index: refers to an index in the accordeon component's parts array.

Item

As the item part, under the hood is just a collapse, it's best to consult it's own documentation page.