Accordion

Example

Import the required components Accordion and AccordionItem to use it in your project.

Svelte

<script>
  import { Accordion, AccordionItem } from "theui-svelte";
</script>

You can create an accordion in two ways, using props and using Svelte 5 snippet. The example are showing below:

Title Using prop

You can create an accordion item with a title and content props using the following example.

Human Psychology Fact

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<AccordionItem title="Human Psychology Fact">
  <b>Cognitive dissonance</b> refers to the ...
</AccordionItem>

Title Using Snippet

If you have custom content/elements in the title or content, you ca use Svelte 5's snippet showing the following example:

Human Psychology Fact

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<AccordionItem>
  {#snippet title()}
    Human Psychology Fact
  {/snippet}
  <b>Cognitive dissonance</b> refers to the ...
</AccordionItem>

Group Accordion

To create a group of accordion items, wrap multiple AccordionItem components within an Accordion component:

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 2

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<Accordion>
  <AccordionItem title="Human Psychology Fact: 1">
    ...
  </AccordionItem>
  <AccordionItem title="Human Psychology Fact: 2">
    ...
  </AccordionItem>
</Accordion>

Flush Accordion

The flush variant drops the outer border and the rounding, leaving only the dividers between the items. Set the flush attribute on the Accordion and every AccordionItem inside it picks it up.

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 2

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<Accordion flush> ... </Accordion>

Sizes

The Accordion and AccordionItem component provides a size prop to control the size of the accordion items. The size prop can take one of the following values: 'compact', 'default', or 'large'.

Set size on the Accordion and every AccordionItem inside it inherits the value, so you do not have to set it on each one.

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 2

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<Accordion size="compact"> ... </Accordion>

In the example above every AccordionItem uses the compact size, because the value is set once on the Accordion.

You can also set the size prop individually on each AccordionItem component which will override the size specified on the Accordion.

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 2

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<Accordion size="compact">
  <AccordionItem>
    ...
  </AccordionItem>
  <AccordionItem size="large">
    ...
  </AccordionItem>
</Accordion>

Accordion Open State

To have an AccordionItem open by default, add the open attribute to the AccordionItem you want to keep open. This is a dynamic attribute, not a prop, and will take effect when added to the component.

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 2

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<Accordion>
  <AccordionItem>
    ...
  </AccordionItem>
  <AccordionItem open>
    ...
  </AccordionItem>
</Accordion>

Standalone Mode

The Accordion component comes with a standalone prop that controls how accordion items behave when they are opened or closed. This prop determines whether multiple items can remain open simultaneously or if only one item can stay open at a time.

Default Behavior (standalone: true): Only one accordion can remain open at a time within the group. Opening a new item will automatically close the currently open one.
Multiple Open (standalone: false): Allows multiple accordion items in the group to remain open simultaneously.

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 2

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 3

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<Accordion standalone={false}>
  <AccordionItem>
    ...
  </AccordionItem>
  ...
</Accordion>

Rounded Corner

The rounded prop controls the border radius of the accordion items. Available values are "none", "sm", "md" (default), "lg", "xl", "2xl" and "full". When set on the Accordion, all AccordionItems inherit it, and in a group only the outer corners of the first and last items are rounded. You can also set it on an individual AccordionItem. The rounded prop has no effect on a flush accordion.

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Human Psychology Fact: 2

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<Accordion rounded="xl"> ... </Accordion>
<AccordionItem rounded="none"> ... </AccordionItem>

Animation Speed

The animationSpeed prop controls how fast the accordion opens and closes. Available values are "none", "slower", "slow", "normal", "fast" (default), and "faster".

Animation speed: Slower

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Animation speed: Slow

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Animation speed: normal

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Animation speed: fast

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Animation speed: faster

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Animation speed: none

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<AccordionItem ... animationSpeed="slower"> ... </AccordionItem>
<AccordionItem ... animationSpeed="slow"> ... </AccordionItem>
<AccordionItem ... animationSpeed="normal"> ... </AccordionItem>
<AccordionItem ... animationSpeed="fast"> ... </AccordionItem>
<AccordionItem ... animationSpeed="faster"> ... </AccordionItem>
<AccordionItem ... animationSpeed="none"> ... </AccordionItem>

Customization

Several props take classes for the different parts of the accordion, so the header, the body and the wrapper can be restyled separately.

Available Props for Customization

containerClasses: Apply custom classes to the accordion's main container.
openContainerClasses: Set custom classes for the container when the accordion is active (expanded).
contentClasses: Define custom classes for the content section.
titleClasses: Customize the classes for the title of each accordion item.
openTitleClasses: Apply specific classes to the title when the accordion is active (expanded).

Human Psychology Fact: 1

Cognitive dissonance refers to the discomfort we feel when holding conflicting beliefs or attitudes. For instance, a person who smokes but knows it's harmful might experience tension. To alleviate this discomfort, they may justify their behavior by downplaying the risks or highlighting benefits, like stress relief. This psychological mechanism illustrates how we strive for internal consistency, shaping our perceptions and decisions to align with our beliefs and actions.

Svelte

<AccordionItem
  containerClasses="border-4"
  openContainerClasses="border-4 border-brand-600"
  titleClasses="text-brand-500"
  openTitleClasses="text-brand-700 bg-brand-200"
>
</AccordionItem>

Anything else you pass reaches the element itself, so an id, a title, a data-* attribute or an event handler all work the way they would on a <div>. The same is true of an AccordionItem.

Accessibility

The Accordion ships with the ARIA wiring and the keyboard support it needs. Here is what is handled:

Keyboard Navigation
- Use tab to navigate between headers.
- Use Space or Enter to toggle the expanded/collapsed state of an accordion item.
ARIA Attributes
- The aria-expanded attribute will be managed by the component itself for a properly accessible accordion.
- The aria-controls links the header to its associated content.
- Each header and content has a unique id for ARIA attributes.
- Hidden content uses aria-hidden="true" when collapsed and aria-hidden="false" when expanded.
Focus Management
- The focus is retained on the header when toggling the accordion.
- tabindex="0" ensures all headers are keyboard-navigable.
Screen Reader Compatibility
- Descriptive labels or headings can be added for better understanding.
- Semantic roles and ARIA attributes provide full support for assistive technologies.

Example

Title Using prop

Title Using Snippet

Group Accordion

Flush Accordion

Sizes

Accordion Open State

Standalone Mode

Rounded Corner

Animation Speed

Customization

Available Props for Customization

Accessibility

Configuration

Accordion

Accordion Item