Collapsible

The Collapsible component is a highly customizable and versatile component used for hiding and showing content based on user interaction. It consists of a trigger and content, where the trigger is used to toggle the visibility of the content. This component is built on top of the @radix-ui/react-collapsible primitive, providing additional styling and functionality.

Importing

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@ef-global/backpack/Collapsible';

Props

Collapsible

Name	Type	Default	Description
children	`ReactElement` Array	-	The trigger and content elements for the component.
className	`string`	-	The CSS class name for the root element.
...rest	`CollapsiblePrimitiveProps`	-	Rest of the props are passed down to the Radix Collapsible component.

CollapsibleContent

Name	Type	Default	Description
children	`ReactNode`	-	The content to be shown or hidden.
className	`string`	-	The CSS class name for the content element.
...rest	`CollapsiblePrimitiveContentProps`	-	Rest of the props are passed down to the Radix CollapsibleContent component.

CollapsibleTrigger

Name	Type	Default	Description
children	`ReactNode`	-	The element used to trigger the visibility toggle.
className	`string`	-	The CSS class name for the trigger element.
...rest	`CollapsiblePrimitiveTriggerProps`	-	Rest of the props are passed down to the Radix CollapsibleTrigger component.

Usage

Default Usage

<Collapsible>
  <CollapsibleTrigger>Trigger</CollapsibleTrigger>
  <CollapsibleContent>
    Cras mattis consectetur purus sit amet fermentum. Etiam porta sem
    malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit
  </CollapsibleContent>
</Collapsible>

As Child

<Collapsible>
  <CollapsibleTrigger asChild={true}>
    <Button as={'button'}>Trigger</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Cras mattis consectetur purus sit amet fermentum. Etiam porta sem
    malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit
  </CollapsibleContent>
</Collapsible>

Controlled

const [open, setOpen] = useState(false);
<Collapsible open={open} onClick={() => setOpen(!open)}>
  <CollapsibleTrigger
    className={styles.collapsibleTextIcon}
    aria-label={open ? 'Collapse' : 'Expand'}
  >
    <Text variant={'uiLabelBold'}>Trigger</Text>
    <AnimatedChevron active={open} />
  </CollapsibleTrigger>
  <CollapsibleContent>
    Cras mattis consectetur purus sit amet fermentum. Etiam porta sem
    malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit
  </CollapsibleContent>
</Collapsible>

Inside Surface

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...

        const [open, setOpen] = useState(false);
        <TestWrapper>
        <Surface variant={'shadow-m'} className={styles.surface}>
    <Text as={'p'} align={'start'} variant={'body'}>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy...
    </Text>
    <Collapsible
        open={open}
        onClick={() => setOpen(!open)}
        className={styles.collapsibleBottom}
    >
        <CollapsibleContent>
            <Text as={'p'} align={'start'} variant={'body'}>
                Cras mattis consectetur purus sit amet fermentum. Etiam porta sem
                malesuada magna mollis euismod. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit
            </Text>
        </CollapsibleContent>
        <CollapsibleTrigger
            className={styles.trigger}
            aria-label={open ? 'Collapse' : 'Expand'}
        >
            <AnimatedChevron active={open} />
        </CollapsibleTrigger>
    </Collapsible>
</Surface>

With List

This is title 1
This is item 1
This is title 2
This is item 2
This is title 3
This is item 3

const [open, setOpen] = useState(false);
    <div>
        <List variant={'border'}>
            // list items here...
        </List>
        <Collapsible
            open={open}
            onClick={() => setOpen(!open)}
            className={styles.collapsibleBottom}
        >
            <CollapsibleContent>
                <List variant={'border'}>
                    // more list items here...
                </List>
            </CollapsibleContent>
            <CollapsibleTrigger
                className={clsx(styles.collapsibleTextIcon, styles.listTrigger)}
                aria-label={open ? 'See less' : 'See more'}
            >
                <Text variant={'uiLabel'}>{open ? 'See less' : 'See more'}</Text>
                <AnimatedChevron active={open} />
            </CollapsibleTrigger>
        </Collapsible>
    </div>

Carousel Divider