Accordion

A vertically stacked list of headings that reveal or hide associated sections of content. Follows USWDS accordion patterns.

Props

`c-accordion`

Prop	Default	Description
`type`		Accordion style: leave empty for borderless (default), `bordered`, or `multiselectable`
`extra_classes`		Additional CSS classes to apply to the accordion wrapper

`c-accordion-item`

Prop	Default	Description
`heading`		The heading text displayed in the accordion button
`control_id`		Unique ID linking the button to its content panel
`is_expanded`	`False`	Whether the panel is open on initial render
`heading_class`	`usa-accordion__heading`	CSS class for the heading element
`button_class`	`usa-accordion__button`	CSS class for the button element
`content_class`	`usa-accordion__content usa-prose`	CSS class for the content panel

Example Usage

Borderless (Default)

<c-accordion>
    <c-accordion-item heading="Accordion item 1" control_id="a1" :is_expanded="True">
        <p>Content for accordion item 1.</p>
    </c-accordion-item>
    <c-accordion-item heading="Accordion item 2" control_id="a2">
        <p>Content for accordion item 2.</p>
    </c-accordion-item>
    <c-accordion-item heading="Accordion item 3" control_id="a3">
        <p>Content for accordion item 3.</p>
    </c-accordion-item>
</c-accordion>

Bordered

<c-accordion type="bordered">
    <c-accordion-item heading="Accordion item 1" control_id="b1">
        <p>Content for accordion item 1.</p>
    </c-accordion-item>
    <c-accordion-item heading="Accordion item 2" control_id="b2">
        <p>Content for accordion item 2.</p>
    </c-accordion-item>
    <c-accordion-item heading="Accordion item 3" control_id="b3">
        <p>Content for accordion item 3.</p>
    </c-accordion-item>
</c-accordion>

Multiselectable

<c-accordion type="multiselectable">
    <c-accordion-item heading="Accordion item 1" control_id="c1">
        <p>Content for accordion item 1.</p>
    </c-accordion-item>
    <c-accordion-item heading="Accordion item 2" control_id="c2">
        <p>Content for accordion item 2.</p>
    </c-accordion-item>
    <c-accordion-item heading="Accordion item 3" control_id="c3">
        <p>Content for accordion item 3.</p>
    </c-accordion-item>
</c-accordion>

Usage Notes

Each c-accordion-item must have a unique control_id on the page
By default only one panel can be open at a time; use type="multiselectable" to allow multiple open panels simultaneously
Set :is_expanded="True" on an item to have it open on page load
Accordion content is passed as slot content between the opening and closing c-accordion-item tags

{% load cotton %}

<div class="component-variants">
    <h1>Accordion Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        
        {% cotton accordion type="{{ variant.type }}" %}
            {% for item in variant.items %}
            {% cotton accordion-item heading="{{ item.heading }}" control_id="{{ item.control_id }}" :is_expanded="{{ item.is_expanded }}" %}
                <p>
                {{ item.content }}
                </p>
            {% endcotton %}
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Accordion
context:
  variants:
    - title: "Borderless (Default)"
      type: ""
      items:
        - heading: "Accordion item 1"
          control_id: "a1"
          is_expanded: "True"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: "Accordion item 2"
          control_id: "a2"
          is_expanded: "False"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: "Accordion item 3"
          control_id: "a3"
          is_expanded: "False"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: "Accordion Item 4"
          control_id: "a4"
          is_expanded: "False"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
    
    - title: "Bordered"
      type: "bordered"
      items:
        - heading: "Accordion item 1"
          control_id: "b1"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: "Accordion item 2"
          control_id: "b2"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: "Accordion item 3"
          control_id: "b3"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: ""
          control_id: "b4"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
    
    - title: "Multiselectable"
      type: "multiselectable"
      items:
        - heading: "Accordion item 1"
          control_id: "c1"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: "Accordion item 2"
          control_id: "c2"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: "Accordion item 3"
          control_id: "c3"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
        - heading: ""
          control_id: "c4"
          is_expanded: "false"
          content: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."