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



{/* 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 `salla-accordion-head` component represents the header of an accordion.
Used inside `salla-accordion`, which sets `collapsible` and `collapsed` on it; a theme rarely sets those itself.

Clicking anywhere on the header, or on its plus/minus button, toggles it when `collapsible` is true. The toggle
button is a `<button type="button">`: keyboard users reach it with Tab, its `aria-expanded` follows the collapsed
state and its `aria-label` is the text of the `title` slot. The collapsed state is
mirrored in a `data-collapsed` attribute on the head, its parent `salla-accordion` and the sibling `salla-accordion-body`.

## Use it [#use-it]

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

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

## 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>
        <h3 slot="title">Shipping</h3>
        <span slot="note">Optional</span>
      </SallaAccordionHead>
      <SallaAccordionBody>Delivery takes 2 to 4 days.</SallaAccordionBody>
    </SallaAccordion>
  );
}
```

```html
<salla-accordion>
  <salla-accordion-head>
    <h3 slot="title">Shipping</h3>
    <span slot="note">Optional</span>
  </salla-accordion-head>
  <salla-accordion-body>Delivery takes 2 to 4 days.</salla-accordion-body>
</salla-accordion>
```

## Properties [#properties]

| Property      | Attribute     | Description                                                                                            | Type      | Default |
| ------------- | ------------- | ------------------------------------------------------------------------------------------------------ | --------- | ------- |
| `collapsed`   | `collapsed`   | Current collapsed state. `true` means the body is collapsed. Updated when the header is toggled.       | `boolean` | `true`  |
| `collapsible` | `collapsible` | Whether clicking the header toggles it. When `false`, clicks do nothing and no toggle button is shown. | `boolean` | `false` |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event             | Description                                                                                                                 | Detail   |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------- | -------- |
| `accordionToggle` | Emitted when the accordion head is clicked and the collapsed state changes. Only emitted when the component is collapsible. | `Object` |

## Slots [#slots]

| Slot       | Description                                                                                                                                                         |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `html`     | Extra raw HTML content, shown after the progress.                                                                                                                   |
| `note`     | Note content shown at the end, before the toggle button. It is rendered only if a `[slot="note"]` element exists when the head renders, or the head is collapsible. |
| `progress` | Progress indicator content, shown after the title.                                                                                                                  |
| `title`    | The main title content.                                                                                                                                             |

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