Twilight
EngineWeb components

salla-accordion-body

The collapsible content area of a salla-accordion.

Used inside salla-accordion

<salla-accordion> renders this component for you. You rarely use it directly.

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

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

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

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

Slots

SlotDescription
(default)The content to show or hide.

Used inside: <salla-multiple-bundle-product-cart>, <salla-multiple-bundle-product-details>, <salla-offer>, <salla-order-details-multiple-bundle-product>.

On this page

Use itExampleSlotsRelated