# salla-accordion (https://docs.salla.dev/twilight/react/web-components/salla-accordion)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

The `salla-accordion` component represents an accordion element.
Use this component to encapsulate content within a collapsible section.

Put a `salla-accordion-head` and a `salla-accordion-body` inside it. The head shows a plus/minus toggle button
and toggles the body when it is clicked (when `collapsible` is true). It renders without shadow DOM, so theme CSS applies to its children.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-accordion>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaAccordion } from '@salla.sa/twilight-components-react/accordion';
```

## Try it [#try-it]

<Demo name="web-components/salla-accordion" />

## Example [#example]

```tsx
import { SallaAccordion } from '@salla.sa/twilight-components-react/accordion';
import { SallaAccordionHead } from '@salla.sa/twilight-components-react/accordion-head';
import { SallaAccordionBody } from '@salla.sa/twilight-components-react/accordion-body';

export function Example() {
  return (
    <SallaAccordion bordered size="md">
      <SallaAccordionHead>
        <span slot="title">Shipping policy</span>
      </SallaAccordionHead>
      <SallaAccordionBody>Orders ship within 2 days.</SallaAccordionBody>
    </SallaAccordion>
  );
}
```

```html
<salla-accordion bordered size="md">
  <salla-accordion-head>
    <span slot="title">Shipping policy</span>
  </salla-accordion-head>
  <salla-accordion-body>Orders ship within 2 days.</salla-accordion-body>
</salla-accordion>
```

## Properties [#properties]

| Property      | Attribute     | Description                                                                                                                                                                   | Type                   | Default |
| ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------- |
| `bordered`    | `bordered`    | Adds a border around the accordion. Default is false.                                                                                                                         | `boolean`              | `false` |
| `collapsed`   | `collapsed`   | Whether the body is collapsed (hidden). Default is true, so the accordion starts closed; set `collapsed="false"` to start open. It is updated when the user toggles the head. | `boolean`              | `true`  |
| `collapsible` | `collapsible` | When true (default), clicking the head toggles the body. When false, the head does not toggle.                                                                                | `boolean`              | `true`  |
| `size`        | `size`        | Size of the accordion elements. One of `sm`, `md` or `lg`. Default is `md`.                                                                                                   | `"lg" \| "md" \| "sm"` | `"md"`  |

## Slots [#slots]

| Slot      | Description                                                    |
| --------- | -------------------------------------------------------------- |
| (default) | A `salla-accordion-head` followed by a `salla-accordion-body`. |

## Related [#related]

Used inside: [`<salla-multiple-bundle-product-cart>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product-cart), [`<salla-multiple-bundle-product-details>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product-details), [`<salla-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-offer), [`<salla-order-details-multiple-bundle-product>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details-multiple-bundle-product).