PXD

Collapse

A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.

Default

code
<template>
  <PCollapseGroup>
    <PCollapse title="Question A">
      <div class="mb-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
      </div>
    </PCollapse>

    <PCollapse title="Question B">
      <div class="mb-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
      </div>
    </PCollapse>
  </PCollapseGroup>
</template>

Expanded

code
<template>
  <PCollapseGroup>
    <PCollapse expand title="Question A">
      <div class="mb-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
      </div>
    </PCollapse>

    <PCollapse title="Question B">
      <div class="mb-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
      </div>
    </PCollapse>
  </PCollapseGroup>
</template>

Multiple

code
<template>
  <PCollapseGroup multiple>
    <PCollapse title="Question A">
      <div class="mb-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
      </div>
    </PCollapse>

    <PCollapse title="Question B">
      <div class="mb-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
      </div>
    </PCollapse>
  </PCollapseGroup>
</template>

Sizes

code
<template>
  <PStack direction="col" gap="8">
    <PCollapseGroup size="sm">
      <PCollapse title="Question A">
        <div class="mb-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
        </div>
      </PCollapse>

      <PCollapse title="Question B">
        <div class="mb-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
        </div>
      </PCollapse>
    </PCollapseGroup>

    <PCollapseGroup size="md">
      <PCollapse title="Question A">
        <div class="mb-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
        </div>
      </PCollapse>

      <PCollapse title="Question B">
        <div class="mb-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
        </div>
      </PCollapse>
    </PCollapseGroup>

    <PCollapseGroup size="lg">
      <PCollapse title="Question A">
        <div class="mb-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
        </div>
      </PCollapse>

      <PCollapse title="Question B">
        <div class="mb-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.
        </div>
      </PCollapse>
    </PCollapseGroup>
  </PStack>
</template>