Accordion Stable Dark theme

With an Accordion you have the ability to group together related content and show it as an expandable list. This keeps the list concise and saves vertical space while allowing more information to be provided if desired.

Usage Code

<uimc-accordion>
    <uimc-accordion-item>
      <div slot="title"></div>
      <p></p>
    </uimc-accordion-item>
</uimc-accordion>

Accordion container `<uimc-accordion>`

Attribute	Description	Values	Default
theme	Set the color scheme of the component	`light`, `dark`	`light`

Slot	Slotted content
default	Slot for some `<uimc-accordion-item>`

Accordion items `<uimc-accordion-item>`

Attribute	Description	Values	Default
open	State of the accordion item	–	–

Callback	Argument	Description
onChange	current accordion item	Callback function that gets triggered when the accordion toggles

Slot	Slotted content
title	Slot for the not collapsing title
default	Slot for descriptions, images, buttons etc.

Working sample

Title 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Title 2

<uimc-accordion>
    <uimc-accordion-item>
      <div slot="title">Title 1</div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </uimc-accordion-item>
    <uimc-accordion-item>
      <div slot="title">Title 2</div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </uimc-accordion-item>
</uimc-accordion>

Dark theme