Light Dark System

Accordion

<cw-accordion> | CwAccordion
Since 1.5 experimental

Accordions group multiple accordion items, optionally keeping only one expanded at a time.

Accordions group multiple accordion items. By default, only one item can be open at a time — opening one closes the rest.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
<cw-accordion>
  <cw-accordion-item summary="First" open>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.
  </cw-accordion-item>
  <cw-accordion-item summary="Second">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </cw-accordion-item>
  <cw-accordion-item summary="Third">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </cw-accordion-item>
</cw-accordion>

import CwAccordion from '@cordwainer/cw-elements/dist/react/accordion';
import CwAccordionItem from '@cordwainer/cw-elements/dist/react/accordion-item';

const App = () => (
  <CwAccordion>
    <CwAccordionItem summary="First" open>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </CwAccordionItem>
    <CwAccordionItem summary="Second">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </CwAccordionItem>
    <CwAccordionItem summary="Third">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </CwAccordionItem>
  </CwAccordion>
);

Examples

Multiple

Add the multiple attribute to allow more than one accordion item to stay open at the same time.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
<cw-accordion multiple>
  <cw-accordion-item summary="First" open>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.
  </cw-accordion-item>
  <cw-accordion-item summary="Second" open>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </cw-accordion-item>
  <cw-accordion-item summary="Third">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </cw-accordion-item>
</cw-accordion>

import CwAccordion from '@cordwainer/cw-elements/dist/react/accordion';
import CwAccordionItem from '@cordwainer/cw-elements/dist/react/accordion-item';

const App = () => (
  <CwAccordion multiple>
    <CwAccordionItem summary="First" open>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </CwAccordionItem>
    <CwAccordionItem summary="Second" open>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </CwAccordionItem>
    <CwAccordionItem summary="Third">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </CwAccordionItem>
  </CwAccordion>
);

Disabled Item

Use the disabled attribute on an individual accordion item to prevent it from being toggled.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This content can’t be shown because the item is disabled. 
<cw-accordion>
  <cw-accordion-item summary="First" open>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.
  </cw-accordion-item>
  <cw-accordion-item summary="Disabled" disabled>
    This content can't be shown because the item is disabled.
  </cw-accordion-item>
</cw-accordion>

import CwAccordion from '@cordwainer/cw-elements/dist/react/accordion';
import CwAccordionItem from '@cordwainer/cw-elements/dist/react/accordion-item';

const App = () => (
  <CwAccordion>
    <CwAccordionItem summary="First" open>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </CwAccordionItem>
    <CwAccordionItem summary="Disabled" disabled>
      This content can't be shown because the item is disabled.
    </CwAccordionItem>
  </CwAccordion>
);

Customizing the Summary Icon

Use the expand-icon and collapse-icon slots on an individual item to change its expand and collapse icons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<cw-accordion>
  <cw-accordion-item summary="Toggle Me" class="custom-icons">
    <cw-icon name="plus-square" slot="expand-icon"></cw-icon>
    <cw-icon name="dash-square" slot="collapse-icon"></cw-icon>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.
  </cw-accordion-item>
</cw-accordion>

<style>
  cw-accordion-item.custom-icons::part(summary-icon) {
    /* Disable the expand/collapse animation */
    rotate: none;
  }
</style>

import CwAccordion from '@cordwainer/cw-elements/dist/react/accordion';
import CwAccordionItem from '@cordwainer/cw-elements/dist/react/accordion-item';
import CwIcon from '@cordwainer/cw-elements/dist/react/icon';

const css = `
  cw-accordion-item.custom-icons::part(summary-icon) {
    /* Disable the expand/collapse animation */
    rotate: none;
  }
`;

const App = () => (
  <>
    <CwAccordion>
      <CwAccordionItem summary="Toggle Me" class="custom-icons">
        <CwIcon name="plus-square" slot="expand-icon" />
        <CwIcon name="dash-square" slot="collapse-icon" />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua.
      </CwAccordionItem>
    </CwAccordion>

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/accordion/accordion.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/accordion/accordion.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/accordion/accordion.js';

To import this component as a React component:

import CwAccordion from '@cordwainer/cw-elements/dist/react/accordion';

Slots

Name Description
(default) One or more <cw-accordion-item> elements to display.

Learn more about using slots.

Properties

Name Description Reflects Type Default
multiple When set, more than one accordion item can be open at the same time. By default, opening one closes the rest. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.