Accordion

Accordion is a toggle component to help customers expand and collapse sections of data

Figma design

Accordion with visible body in the collapsed state

"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.
The Little Mermaid read more... The Little Mermaid read less...
<tk-accordion>
  <tk-accordion-body slot="body" id="accordion1" expanded="false" max-height="50">
    <div>
      "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.
    </div>
  </tk-accordion-body>
  <tk-accordion-trigger
    slot="trigger"
    id="accordionTrigger1"
    expanded="false"
    onClick="toggleAccordion(accordionTrigger1, accordion1)"
  >
    <span slot="collapsed">The Little Mermaid read more...</span>
    <span slot="expanded">The Little Mermaid read less...</span>
  </tk-accordion-trigger>
</tk-accordion>

Description

This state can be achieved by providing max-height value to accordion-body component

Accordion with no max-height for the collapsed state

Ali Baba and the Forty Thieves Collapse
"Ali Baba and the Forty Thieves" (Arabic: علي بابا والأربعون لصا‎) is a folk tale from the One Thousand and One Nights. It was added to the collection in the 18th century by its French translator Antoine Galland, who heard it from Syrian storyteller Hanna Diyab. As one of the most familiar of the Arabian Nights tales, it has been widely retold and performed in many media, especially for children.
<tk-accordion>
  <tk-accordion-trigger
    slot="trigger"
    id="accordionTrigger2"
    expanded="false"
    onClick="toggleAccordion(accordionTrigger2, accordion2)"
  >
    <span slot="collapsed">Ali Baba and the Forty Thieves</span>
    <span slot="expanded">Collapse</span>
  </tk-accordion-trigger>
  <tk-accordion-body slot="body" id="accordion2" expanded="false">
    <div>
      "Ali Baba and the Forty Thieves" (Arabic: علي بابا والأربعون لصا‎) is a folk tale from the One Thousand and One Nights. It was added to the collection in the 18th century by its French translator Antoine Galland, who heard it from Syrian storyteller Hanna Diyab. As one of the most familiar of the Arabian Nights tales, it has been widely retold and performed in many media, especially for children.
    </div>
  </tk-accordion-body>
</tk-accordion>

<script>
  const toggleAccordion = (trigger, accordion) => {
    trigger.expanded = !trigger.expanded;
    accordion.expanded = !accordion.expanded;
  }
</script>

Description

This state can be achieved by providing max-height value to accordion-body component

Accordion with trigger positioned above its content

"The Wolf and the Seven Young Goats" (German: Der Wolf und die sieben jungen Geißlein) is a fairy tale collected by the Brothers Grimm and published in Grimm's Fairy Tales (KHM 5). It is of Aarne-Thompson type 123. The tale has obvious resemblance to "The Three Little Pigs" and other type 124 folktales. The rescue of the kids from the wolf's belly and his punishment by filling him with stones can also been compared to the rescue and revenge of Little Red Cap against the wolf (Aarne-Thompson type 333). The story was published by the Brothers Grimm in the first edition of Kinder- und Hausmärchen in 1812. Their source was the Hassenpflug family from Hanau. A similar tale, The wolf and the kids, has been told in the Middle East and parts of Europe, and probably originated in the first century.
The Wolf and the Seven Young Goats Collapse
<tk-accordion trigger-position="top">
  <tk-accordion-body slot="body" id="accordion3" expanded="true" trigger-position="top">
    <div>
      "The Wolf and the Seven Young Goats" (German: Der Wolf und die sieben jungen Geißlein) is a fairy tale collected by the Brothers Grimm and published in Grimm's Fairy Tales (KHM 5). It is of Aarne-Thompson type 123. The tale has obvious resemblance to "The Three Little Pigs" and other type 124 folktales. The rescue of the kids from the wolf's belly and his punishment by filling him with stones can also been compared to the rescue and revenge of Little Red Cap against the wolf (Aarne-Thompson type 333). The story was published by the Brothers Grimm in the first edition of Kinder- und Hausmärchen in 1812. Their source was the Hassenpflug family from Hanau. A similar tale, The wolf and the kids, has been told in the Middle East and parts of Europe, and probably originated in the first century.
    </div>
  </tk-accordion-body>
  <tk-accordion-trigger
    slot="trigger"
    id="accordionTrigger3"
    expanded="true"
    onClick="toggleAccordion(accordionTrigger3, accordion3)"
  >
    <span slot="collapsed">The Wolf and the Seven Young Goats</span>
    <span slot="expanded">Collapse</span>
  </tk-accordion-trigger>
</tk-accordion>

Description

This state can be achieved by providing a trigger-position value to the accordion-body component

Props

Property Required? Default Description
expanded no false The boolean is used to specify the initial state of the toggle.
max-height no false The number value is used to specify the max height of the accordion body in the collapsed state. It automatically adds a scroll bar to the body in this state.
trigger-position no bottom The string value is used to specify whether the toggle trigger is positioned above or below its content.

Usage

Do

  • Keep content for the toggle button text clear, concise, actionable and no longer than 40 characters

Don't

  • Write the toggle text that is greater than 40 characters