Accordion Item
Importing
Slots
Properties
Events
Methods
Parts
Animations
Dependencies

Accordion Item

<cw-accordion-item> | CwAccordionItem

Since 1.5

experimental

Accordion items are collapsible panels used inside an accordion — each shows a brief summary and expands to show additional content.

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">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.
  </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="Toggle Me">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </CwAccordionItem>
  </CwAccordion>
);

Additional demonstrations can be found in the accordion examples.

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-item/accordion-item.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-item/accordion-item.js';

To import this component using a bundler:

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

To import this component as a React component:

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

Slots

Name	Description
(default)	The accordion item’s main content.
`summary`	The accordion item’s summary. Alternatively, you can use the `summary` attribute.
`expand-icon`	Optional expand icon to use instead of the default. Works best with `<cw-icon>`.
`collapse-icon`	Optional collapse icon to use instead of the default. Works best with `<cw-icon>`.

Learn more about using slots.

Properties

Name	Description	Type	Default
`open`	Indicates whether or not the accordion item is open. You can toggle this attribute to show and hide the item, or you can use the `show()` and `hide()` methods and this attribute will reflect the item’s open state.	`boolean`	`false`
`summary`	The summary to show in the header. If you need to display HTML, use the `summary` slot instead.	`string`	-
`disabled`	Disables the accordion item so it can’t be toggled.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`cw-show`	`onCwShow`	Emitted when the accordion item opens.	-
`cw-after-show`	`onCwAfterShow`	Emitted after the accordion item opens and all animations are complete.	-
`cw-hide`	`onCwHide`	Emitted when the accordion item closes.	-
`cw-after-hide`	`onCwAfterHide`	Emitted after the accordion item closes and all animations are complete.	-

Learn more about events.

Methods

Name	Description	Arguments
`show()`	Shows the accordion item.	-
`hide()`	Hides the accordion item.	-

Learn more about methods.

Parts

Name	Description
`base`	The component’s base wrapper.
`header`	The header that wraps both the summary and the expand/collapse icon.
`summary`	The container that wraps the summary.
`summary-icon`	The container that wraps the expand/collapse icons.
`content`	The accordion item’s content.

Learn more about customizing CSS parts.

Animations

Name	Description
`accordion-item.show`	The animation to use when showing the accordion item.
`accordion-item.hide`	The animation to use when hiding the accordion item.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

<cw-icon>