Accordion

The Accordion component is used to show or hide information based on the collapse and expand state of its child elements. It has two variants with configurations provided in the Configuration section.

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:

Accordion By Props

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

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

Accordion Using Snippet

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

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:

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

Flash Accordion

The Flush Accordion is a sleek and minimalist variant of the Accordion component, designed for users who prefer a simple, streamlined appearance. By setting the flush attribute on the Accordion, all the contained AccordionItem components will adopt this flush style, providing a consistent and clean look across the entire accordion.

Svelte 
<Accordion flush> ... </Accordion>

Accordion Size

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'.

When the size prop is set on the Accordion component, all AccordionItem components within it will inherit this size. This ensures a consistent appearance for all items in the accordion.

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

In the example above, all the AccordionItems components will have the compact size. Setting it on Accordion ensures all items match for a consistent look.

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

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.

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

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.
Svelte 
<Accordion standalone={false}>
  <AccordionItem>
    ...
  </AccordionItem>
  ...
</Accordion>

Customization

The accordion component in theui-svelte offers a wide range of style customization options through several props. These props let you apply custom classes to different parts of the accordion, ensuring it matches your design perfectly.

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.
  • openContentClasses: Specify classes for the content when it is active (visible).
  • titleClasses: Customize the classes for the title of each accordion item.
  • openTitleClasses: Apply specific classes to the title when the accordion is active (expanded).
Svelte 
<AccordionItem
  containerClasses="border-4"
  openContainerClasses="border-4 border-brand-primary-600"
  titleClasses="text-brand-primary-500"
  openTitleClasses="text-brand-primary-700 bg-brand-primary-200"
>
</AccordionItem>

Accessibility

Our Accordion component is built with accessibility in mind, ensuring a seamless experience for all users, including those relying on assistive technologies. Below are the accessibility features implemented:

  1. Keyboard Navigation
    • Use tab to navigate between headers.
    • Use Space or Enter to toggle the expanded/collapsed state of an accordion item.
  2. 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.
  3. Focus Management
    • The focus is retained on the header when toggling the accordion.
    • tabindex="0" ensures all headers are keyboard-navigable.
  4. Screen Reader Compatibility
    • Descriptive labels or headings can be added for better understanding.
    • Semantic roles and ARIA attributes provide full support for assistive technologies.

Configuration

Accordion

Accordion Item