Collapsible

The collapsible component is used to put long sections of information under a block that merchants can expand or collapse.

Collapsible component examples

Use for a basic “show more” interaction when you need to display more content.

import {
  LegacyCard,
  LegacyStack,
  Button,
  Collapsible,
  TextContainer,
  Link,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';

function CollapsibleExample() {
  const [open, setOpen] = useState(true);

  const handleToggle = useCallback(() => setOpen((open) => !open), []);

  return (
    <div style={{height: '200px'}}>
      <LegacyCard sectioned>
        <LegacyStack vertical>
          <Button
            onClick={handleToggle}
            ariaExpanded={open}
            ariaControls="basic-collapsible"
          >
            Toggle
          </Button>
          <Collapsible
            open={open}
            id="basic-collapsible"
            transition={{duration: '500ms', timingFunction: 'ease-in-out'}}
            expandOnPrint
          >
            <TextContainer>
              <p>
                Your mailing list lets you contact customers or visitors who
                have shown an interest in your store. Reach out to them with
                exclusive offers or updates about your products.
              </p>
              <Link url="#">Test link</Link>
            </TextContainer>
          </Collapsible>
        </LegacyStack>
      </LegacyCard>
    </div>
  );
}

Props

interface CollapsibleProps
idstring

Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop.

expandOnPrint?boolean

Option to show collapsible content when printing.

openboolean

Toggle whether the collapsible is expanded or not.

variant?"inline" | "block"

The direction the collapsible collapses in.

Defaults to 'block'.

transition?boolean |

Override transition properties. When set to false, disables transition completely.

Defaults to transition={{duration: 'var(--p-motion-duration-150)', timingFunction: 'var(--p-motion-ease-in-out)'}}.

onAnimationEnd?() => void

Callback when the animation completes.

children?ReactNode

The content to display inside the collapsible.

Best practices

The collapsible component should:

  • Be used for information that is lower priority or that merchants don’t need to see all the time
  • Not be used to hide error messages or other critical information that requires an immediate action

Content guidelines

Collapsible containers are cards with expandable and collapsible functionality, and should follow the content guidelines for cards.



Accessibility

Use the collapsible component in conjunction with a button. Place the collapsible content immediately after the button that controls it, so merchants with vision or attention issues can easily discover what content is being affected.

  • Use the required id prop of the collapsible component to give the content a unique id value
  • Use the ariaExpanded prop on the button component to add an aria-expanded attribute, which conveys the expanded or collapsed state to screen reader users
  • Use the ariaControls prop on the button component, and set its value to the id value of the collapsible component

    On this page