Accordion is a toggle component to help customers expand and collapse sections of data
<tk-accordion trigger-position="top">
<tk-accordion-trigger-text slot="collapsed">
The Little Mermaid read more...
</tk-accordion-trigger-text>
<tk-accordion-trigger-text slot="expanded">
The Little Mermaid read less...
</tk-accordion-trigger-text>
<tk-accordion-body>
"The Little Mermaid" (Danish: Den lille havfrue) is a Danish literary fairy tale written by the Danish author Hans Christian Andersen. The story follows the journey of a young mermaid who is willing to give up her life in the sea as a mermaid to gain a human soul. The tale was first published in 1837 as part of a collection of fairy tales for children. The original story has been a subject of multiple analyses by scholars such as Jacob Bøggild and Pernille Heegaard as well as the folklorist Maria Tatar. These analyses cover various aspects of the story from interpreting the themes to discussing why Andersen chose to write a tragic story with a happy ending. It has been adapted to various media, including musical theatre, anime, ballet, opera, and film. There is also a statue portraying the mermaid in Copenhagen, Denmark, where the story was written and first published.
</tk-accordion-body>
</tk-accordion>
<tk-accordion trigger-position="top">
<tk-accordion-trigger-text slot="collapsed">
The Little Mermaid read more...
</tk-accordion-trigger-text>
<tk-accordion-trigger-text slot="expanded">
The Little Mermaid read less...
</tk-accordion-trigger-text>
<tk-accordion-body>
"The Little Mermaid" (Danish: Den lille havfrue) is a Danish literary fairy tale written by the Danish author Hans Christian Andersen. The story follows the journey of a young mermaid who is willing to give up her life in the sea as a mermaid to gain a human soul. The tale was first published in 1837 as part of a collection of fairy tales for children. The original story has been a subject of multiple analyses by scholars such as Jacob Bøggild and Pernille Heegaard as well as the folklorist Maria Tatar. These analyses cover various aspects of the story from interpreting the themes to discussing why Andersen chose to write a tragic story with a happy ending. It has been adapted to various media, including musical theatre, anime, ballet, opera, and film. There is also a statue portraying the mermaid in Copenhagen, Denmark, where the story was written and first published.
</tk-accordion-body>
</tk-accordion>
Rendering the accordion with a collapsed body and the trigger positioned above the content.
<tk-accordion trigger-position="top" expanded="true">
<tk-accordion-trigger-text slot="collapsed">
The Little Mermaid read more...
</tk-accordion-trigger-text>
<tk-accordion-trigger-text slot="expanded">
The Little Mermaid read less...
</tk-accordion-trigger-text>
<tk-accordion-body>
"The Little Mermaid" (Danish: Den lille havfrue) is a Danish literary fairy tale written by the Danish author Hans Christian Andersen. The story follows the journey of a young mermaid who is willing to give up her life in the sea as a mermaid to gain a human soul. The tale was first published in 1837 as part of a collection of fairy tales for children. The original story has been a subject of multiple analyses by scholars such as Jacob Bøggild and Pernille Heegaard as well as the folklorist Maria Tatar. These analyses cover various aspects of the story from interpreting the themes to discussing why Andersen chose to write a tragic story with a happy ending. It has been adapted to various media, including musical theatre, anime, ballet, opera, and film. There is also a statue portraying the mermaid in Copenhagen, Denmark, where the story was written and first published.
</tk-accordion-body>
</tk-accordion>
<tk-accordion trigger-position="top">
<tk-accordion-trigger-text slot="collapsed">
The Little Mermaid read more...
</tk-accordion-trigger-text>
<tk-accordion-trigger-text slot="expanded">
The Little Mermaid read less...
</tk-accordion-trigger-text>
<tk-accordion-body>
"The Little Mermaid" (Danish: Den lille havfrue) is a Danish literary fairy tale written by the Danish author Hans Christian Andersen. The story follows the journey of a young mermaid who is willing to give up her life in the sea as a mermaid to gain a human soul. The tale was first published in 1837 as part of a collection of fairy tales for children. The original story has been a subject of multiple analyses by scholars such as Jacob Bøggild and Pernille Heegaard as well as the folklorist Maria Tatar. These analyses cover various aspects of the story from interpreting the themes to discussing why Andersen chose to write a tragic story with a happy ending. It has been adapted to various media, including musical theatre, anime, ballet, opera, and film. There is also a statue portraying the mermaid in Copenhagen, Denmark, where the story was written and first published.
</tk-accordion-body>
</tk-accordion>
expanded="true"
will load the accordion with expanded body content.
<tk-accordion trigger-position="top">
<tk-accordion-trigger-text slot="collapsed">
The Little Mermaid read more...
</tk-accordion-trigger-text>
<tk-accordion-trigger-text slot="expanded">
The Little Mermaid read less...
</tk-accordion-trigger-text>
<tk-accordion-body>
"The Little Mermaid" (Danish: Den lille havfrue) is a Danish literary fairy tale written by the Danish author Hans Christian Andersen. The story follows the journey of a young mermaid who is willing to give up her life in the sea as a mermaid to gain a human soul. The tale was first published in 1837 as part of a collection of fairy tales for children. The original story has been a subject of multiple analyses by scholars such as Jacob Bøggild and Pernille Heegaard as well as the folklorist Maria Tatar. These analyses cover various aspects of the story from interpreting the themes to discussing why Andersen chose to write a tragic story with a happy ending. It has been adapted to various media, including musical theatre, anime, ballet, opera, and film. There is also a statue portraying the mermaid in Copenhagen, Denmark, where the story was written and first published.
</tk-accordion-body>
</tk-accordion>
<tk-accordion trigger-position="top" disabled>
<tk-accordion-trigger-text slot="collapsed">
The Little Mermaid read more...
</tk-accordion-trigger-text>
<tk-accordion-trigger-text slot="expanded">
The Little Mermaid read less...
</tk-accordion-trigger-text>
<tk-accordion-body>
"The Little Mermaid" (Danish: Den lille havfrue) is a Danish literary fairy tale written by the Danish author Hans Christian Andersen. The story follows the journey of a young mermaid who is willing to give up her life in the sea as a mermaid to gain a human soul. The tale was first published in 1837 as part of a collection of fairy tales for children. The original story has been a subject of multiple analyses by scholars such as Jacob Bøggild and Pernille Heegaard as well as the folklorist Maria Tatar. These analyses cover various aspects of the story from interpreting the themes to discussing why Andersen chose to write a tragic story with a happy ending. It has been adapted to various media, including musical theatre, anime, ballet, opera, and film. There is also a statue portraying the mermaid in Copenhagen, Denmark, where the story was written and first published.
</tk-accordion-body>
</tk-accordion>
disabled="true"
will render the accordion in a disabled state. This means the accordion can’t be interacted with as indicated by the mouse cursor.
This component will receive a different set of styles based on the active --tk-theme
CSS property.
To receive theme styling: make sure to set the desired value for this property inside of the :root
selector.
These styles are not ready for production, so they cannot be used in Orders
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disableScroll |
disable-scroll |
Use this prop together with showPreview to prevent scrolling of the body content preview. | boolean |
false |
disabled |
disabled |
Displays the trigger in a disabled style, and disables interaction with it. | boolean |
false |
expanded |
expanded |
Use this prop to render the accordion in an expanded state. | boolean |
false |
showPreview |
show-preview |
Use this prop to show a small preview of the body content. | boolean |
false |
triggerPosition |
trigger-position |
Sets the position of the trigger. Positioned either above or below the content | "bottom" | "top" |
'bottom' |
Event | Description | Type |
---|---|---|
toggle |
Event fired every time the accordion trigger is clicked. It receives a boolean with the expanded setting. | CustomEvent<any> |