salla-accordion-head
The salla-accordion-head component represents the header of an accordion.
Used inside salla-accordion
<salla-accordion> renders this component for you. You rarely use it directly.
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
In HTML or JSX, use the tag <salla-accordion-head> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaAccordionHead } from '@salla.sa/twilight-components-react/accordion-head';Example
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>
);
}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
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
| 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
Used inside: <salla-multiple-bundle-product-cart>, <salla-multiple-bundle-product-details>, <salla-offer>, <salla-order-details-multiple-bundle-product>.