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



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

<Callout title="Used inside salla-accordion">
  [`<salla-accordion>`](https://docs.salla.dev/twilight/react/web-components/salla-accordion) renders this component for you. You rarely use it directly.
</Callout>

The collapsible content area of a `salla-accordion`. Always place it inside `salla-accordion`, after a `salla-accordion-head`.
It has no props. The parent accordion sets its `data-collapsed` attribute and shows or hides it when the head is toggled.

## Use it [#use-it]

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

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

## 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>
      <SallaAccordionHead><span slot="title">Returns</span></SallaAccordionHead>
      <SallaAccordionBody>You can return items within 14 days.</SallaAccordionBody>
    </SallaAccordion>
  );
}
```

```html
<salla-accordion>
  <salla-accordion-head><span slot="title">Returns</span></salla-accordion-head>
  <salla-accordion-body>You can return items within 14 days.</salla-accordion-body>
</salla-accordion>
```

## Slots [#slots]

| Slot      | Description                  |
| --------- | ---------------------------- |
| (default) | The content to show or hide. |

## 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).