Skip to main content
Components
Accordion
pnpm add @winkintel/bootstrap-svelte
GitHub

Accordion

Bootstrap's accordion component built with Svelte 5. Use the accordion component to build vertically collapsing accordions.

Playground

Experiment with the Accordion component by adjusting the props below:

Interactive Playground

Controls

Expanded Items:

Event Log

  • No events logged

Preview

This is the content for item #1. You can put any HTML content here.

Code

            
            <Accordion.Root>
  <Accordion.Item isExpanded={true}>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #1</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse
  onCollapse={handleCollapse}
  onCollapsed={handleCollapsed}
  onExpand={handleExpand}
  onExpanded={handleExpanded}>
      <Accordion.Body>
        This is the content for item #1.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #2</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse
  onCollapse={handleCollapse}
  onCollapsed={handleCollapsed}
  onExpand={handleExpand}
  onExpanded={handleExpanded}>
      <Accordion.Body>
        This is the content for item #2.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #3</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse
  onCollapse={handleCollapse}
  onCollapsed={handleCollapsed}
  onExpand={handleExpand}
  onExpanded={handleExpanded}>
      <Accordion.Body>
        This is the content for item #3.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion.Root>

Basic Example

The basic accordion includes several items that can be expanded and collapsed independently. By default, only one item can be open at a time.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body.

            
            <Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #1</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the first item's accordion body.</strong>
        It is shown by default, until the collapse plugin adds the appropriate
        classes that we use to style each element. You can modify any of this
        with custom CSS or overriding our default variables.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #2</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the second item's accordion body.</strong>
        It is hidden by default, until the collapse plugin adds the appropriate
        classes that we use to style each element.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion.Root>

Always Open

Set the isMultiple prop to true to make accordion items stay open when another item is opened.

This is the first item's accordion body. It can remain open when another item is opened, because the isMultiple prop is set to true.

            
            <Accordion.Root isMultiple={true}>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #1</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the first item's accordion body.</strong>
        It can remain open when another item is opened, because
        the isMultiple prop is set to true.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #2</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the second item's accordion body.</strong>
        It can stay open when other items are opened.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion.Root>

Flush

Add the isFlush prop to remove the default background color, some borders, and rounded corners.

This is the first item's accordion body. Notice there is no border or background. This is a flush accordion.

            
            <Accordion.Root isFlush={true}>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #1</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the first item's accordion body.</strong>
        Notice there is no border or background. This is a flush accordion.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #2</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the second item's accordion body.</strong>
        The flush accordion removes borders and background.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion.Root>

Custom Styling

You can style the accordion using Bootstrap's utility classes to create custom themes.

            
            <div class="bg-dark p-4 rounded">
  <Accordion.Root>
    <Accordion.Item class="bg-dark text-white">
      <Accordion.Header>
        <Accordion.Button class="text-white">Dark Theme Item #1</Accordion.Button>
      </Accordion.Header>
      <Accordion.Collapse>
        <Accordion.Body>
          <strong>This is styled with dark theme classes.</strong>
          You can customize the appearance using standard Bootstrap classes.
        </Accordion.Body>
      </Accordion.Collapse>
    </Accordion.Item>
    <Accordion.Item class="bg-dark text-white">
      <Accordion.Header>
        <Accordion.Button class="text-white">Dark Theme Item #2</Accordion.Button>
      </Accordion.Header>
      <Accordion.Collapse>
        <Accordion.Body>
          <strong>This is the second dark-themed item.</strong>
          Custom styling can be applied to create various visual effects.
        </Accordion.Body>
      </Accordion.Collapse>
    </Accordion.Item>
  </Accordion.Root>
</div>

API Reference

The Accordion component is composed of several sub-components:

Accordion.Root

The main accordion container component

Props

NameTypeDefaultDescription
classstringundefinedAdditional CSS classes to apply
elementRefHTMLElement | nullnullReference to the DOM element
isMultiplebooleanfalseAllows multiple items to be open simultaneously
isFlushbooleanfalseRemoves borders and background from the accordion
idstringauto-generatedUnique ID for the collapse element

Accordion.Item

Container for an individual accordion item

Props

NameTypeDefaultDescription
classstringundefinedAdditional CSS classes to apply
elementRefHTMLElement | nullnullReference to the DOM element
isExpandedbooleanfalseControls whether the item is initially expanded
idstringauto-generatedUnique ID for the collapse element

Accordion.Header

The heading container for the accordion item

Props

NameTypeDefaultDescription
classstringundefinedAdditional CSS classes to apply
elementRefHTMLElement | nullnullReference to the DOM element
idstringauto-generatedUnique ID for the collapse element

Accordion.Button

The clickable button that toggles the accordion item

Props

NameTypeDefaultDescription
classstringundefinedAdditional CSS classes to apply
elementRefHTMLElement | nullnullReference to the DOM element
idstringauto-generatedUnique ID for the collapse element

Accordion.Collapse

The collapsible container that wraps the accordion body

Props

NameTypeDefaultDescription
classstringundefinedAdditional CSS classes to apply
elementRefHTMLElement | nullnullReference to the DOM element
idstringauto-generatedUnique ID for the collapse element

Accordion.Body

The content container for the accordion item

Props

NameTypeDefaultDescription
classstringundefinedAdditional CSS classes to apply
elementRefHTMLElement | nullnullReference to the DOM element
idstringauto-generatedUnique ID for the collapse element

CSS Classes

The components apply Bootstrap's accordion classes based on the provided props:

  • accordion - Base class for the Root component
  • accordion-flush - Applied to Root when isFlush is true
  • accordion-item - Base class for the Item component
  • accordion-header - Base class for the Header component
  • accordion-button - Base class for the Button component
  • accordion-collapse - Base class for the Collapse component
  • accordion-body - Base class for the Body component
  • collapsed - Applied to Button when the corresponding item is not expanded
  • show - Applied to Collapse when the corresponding item is expanded