Vistaprint
styleKeysaccordion

Collapsible

A Collapsible is a section that can be toggled open and closed. It is typically grouped with other Collapsibles into an Accordion.

Playground

Each collapsible has a summary (aka the heading). When the summary is clicked, the collapsible opens or closes, revealing or hiding the collapsible's content.

Content
Share
Share
jsx
<div class="collapsible">
  <div class="collapsible-summary">
    <!-- doesn't have to be a <div> tag; use <h1>-<h6> if appropriate -->
    <button
      class="collapsible-summary-button"
      aria-expanded="false"
      aria-controls="myExampleAccordionContent"
    >
      Summary
    </button>
  </div>
  <div class="collapsible-content" id="myExampleAccordionContent">Content</div>
</div>

StepCollapsible

If you are using an Accordion with the "steps" skin, and are using React Visage, then you'll want to use StepCollapsible instead of BasicCollapsible inside that Accordion. StepCollapsible is a convenience component to make it easier to set up the sub-components inside the collapsible's summary.

Content
Share
Share
jsx

React Convenience Components

React Visage provides BasicCollapsible and StepCollapsible as a convenience for the most common use-cases.

Each is simply created by combining basic components together, so if you find that the Convenience Component isn't exactly what you need, you can easily compose your own version!

BasicCollapsible

BasicCollapsible has no props of its own

What's Under the Hood?

jsx
<Collapsible {...props}>
  <CollapsibleSummary>
    <CollapsibleSummaryButton>{heading}</CollapsibleSummaryButton>
  </CollapsibleSummary>
  <CollapsibleContent>{children}</CollapsibleContent>
</Collapsible>

StepCollapsible

What's Under the Hood?

jsx
<Collapsible {...props}>
  <CollapsibleSummary>
    <CollapsibleSummaryButton>
      <CollapsibleSummaryButtonStepNumber>
        {stepNumber}
      </CollapsibleSummaryButtonStepNumber>
      <CollapsibleSummaryButtonStepTitle>
        {stepTitle}
      </CollapsibleSummaryButtonStepTitle>
      <CollapsibleSummaryButtonStepValue>
        {stepValue}
      </CollapsibleSummaryButtonStepValue>
    </CollapsibleSummaryButton>
  </CollapsibleSummary>
  <CollapsibleContent>{children}</CollapsibleContent>
</Collapsible>

Different text

Using the Collapsible component (not one of the convenience components), you can set a Collapsible to have different summary text depending on whether it is open or closed.

Content
Share
Share
jsx

Rich summary

Using the Collapsible component (not one of the convenience components) with the "rich" option allows you to customize the summary typography by putting typographic styles onto sub-elements inside the summary. Those sub-elements will be arranged in a single horizontal line, aligned to the left.

There is an additional option for "rich" summaries that will cause the last sub-element to be aligned to the right instead.

Content of a collapsible with a "rich" summary
Content of a collapsible with a "rich" summary that is aligning its last element to the right
Share
Share
jsx

Components

CollapsibleSummary

PropTypeDefaultDescription
richboolean

Whether or not the summary is a "rich" summary

richLastAlignstring

The alignment for the last sub-element of a "rich" summary

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)

CollapsibleSummaryButtonStepNumber

CollapsibleSummaryButtonStepNumber has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

CollapsibleSummaryButtonStepTitle

CollapsibleSummaryButtonStepTitle has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

Guidelines

See the Accordion page for guidelines for Collapsibles.

Related

Accordion