---
title: Accordion
desc: Vertically stacked list of items, each item can be expanded or collapsed to reveal the content associated with that item.
ico: mdi:arrow-collapse-vertical
keywords:
  - collapse
  - details
  - disclosure
  - summary

props:
  - class: .prs-accordion
    type: component
    desc: Container
  - class: .prs-accordion-content
    type: part
    desc: For content container
  
alert:
  ico: mdi:wheelchair-accessibility
  body: |
    **For best accessibility:**  
    Please use **details** and **summary** tags. Our CSS takes care of motion-safe sliding open/close animations.

controls:
  - name: symbol
    type: radio
    label: Symbol
    desc: Default chevron or plus symbol.
    default: default
    options:
      - default
      - plus

  - name: open
    type: toggle
    label: Open
    desc: The detail will open automatically when interacted with, but you can force it open by adding an open attribute.
    default: false

  - name: exclusive
    type: toggle
    label: Exclusive
    desc: Allow only one detail open at a time.
    default: false

  - name: ghost
    type: toggle
    label: Ghost
    desc: Hide divider lines.
    default: false

previewHeight: 25 #rem

preview: |
  <div class="w-screen max-w-lg">
    <div class="prs-accordion" :class="{
      'prs-accordion-plus': symbol === 'plus',
      'prs-accordion-ghost': ghost,
    }">
      <details :name="exclusive && 'group-name'" :open="open ? open : false">
        <summary>Summary</summary>
        <div class="prs-accordion-content">
          Lorem ipsum dolor sit amet. Ad aute proident do eu ad eu consectetur ad esse incididunt mollit non.
        </div>
      </details>
      <details :name="exclusive && 'group-name'">
        <summary>Here's a summary with a very long label so we can test the wrapping and make sure the icon position, flex gap, and flex-shrink rules are working properly</summary>
        <div class="prs-accordion-content">
          Lorem ipsum dolor sit amet. Ad aute proident do eu ad eu consectetur ad esse incididunt mollit non.
        </div>
      </details>
      <details :name="exclusive && 'group-name'">
        <summary>The third summary</summary>
        <div class="prs-accordion-content">
          Lorem ipsum dolor sit amet. Ad aute proident do eu ad eu consectetur ad esse incididunt mollit non.
        </div>
      </details>
    </div>
  </div>

code:
  html: |
    <div class="prs-accordion{symbol}{ghost}">
      <details{exclusive}{open}>
        <summary>Summary</summary>
        <div class="prs-accordion-content">
          Content
        </div>
      </details>
      <details{exclusive}>[...]</details>
      <details{exclusive}>[...]</details>
    </div>

  logic:
    symbol: "this.symbol !== 'default' ? (' prs-accordion-'+ this.symbol) : ''"
    open: "this.open ? ' open' : ''"
    exclusive: "this.exclusive ? ' name=\"group-name\"' : ''"
    ghost: "this.ghost ? ' prs-accordion-ghost' : ''"
---