Collapsible Ready

Collapsible is a disclosure component used to reveal additional content. It should contain a heading, followed by any additional content that is revealed on click.

Examples #

Open in new window

<duet-collapsible heading="Click to open details">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>

<script>
  // Select the above component
  var collapsible = document.querySelector("duet-collapsible")

  // Listen for toggle events
  collapsible.addEventListener("duetToggle", function (e) {
    console.log("open", e.target.open)
  })
</script>

Open in new window

<duet-collapsible heading="Click to open details">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>
<duet-divider margin="small"></duet-divider>
<duet-collapsible heading="Click to open"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </duet-collapsible>
<duet-divider margin="small"></duet-divider>
<duet-collapsible heading="Click to"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </duet-collapsible>
<duet-divider margin="small"></duet-divider>
<duet-collapsible heading="Click to open"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </duet-collapsible>

Open in new window

<duet-collapsible heading="Click to open details" open>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</duet-collapsible>

Open in new window

<duet-collapsible heading="Click to open details" heading-weight="normal">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</duet-collapsible>

Open in new window

<duet-collapsible heading="Click to open details" heading-level="h1" heading-weight="normal" heading-size="x-small">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>

<duet-collapsible heading="Click to open details" heading-level="h2" heading-size="x-small">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>

<duet-collapsible heading="Click to open details" heading-level="h3" heading-size="large">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>

Open in new window

<style>
  duet-collapsible::part(duet-collapsible-after-heading) {
    margin-left: auto;
  }
</style>

<duet-collapsible heading-full-width heading="Click to open details">
  <div slot="after-heading">
    <duet-badge margin="none">Badge</duet-badge>
  </div>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>

Open in new window

<style>
  duet-collapsible::part(duet-collapsible-heading-content) {
    font-size: 1rem;
  }

  @media (min-width: 62em) {
    duet-collapsible::part(duet-collapsible-heading-content) {
      font-size: 1.25rem;
    }
  }

  duet-collapsible::part(duet-collapsible-content) {
    padding: 0;
    -webkit-hyphens: none;
    hyphens: none;
  }
</style>
<duet-collapsible heading="Click to open details" headingSize="large" open="true">
  <duet-table margin="none" breakpoint="none-scrollable">
    <table>
      <colgroup>
        <col />
        <col />
        <col class="duet-table-selected-column" />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th width="45%" style="min-width: 180px">Vakuutus</th>
          <th class="duet-text-center">Loisto&shy;kasko</th>
          <th class="duet-text-center duet-color-secondary">Laaja kasko</th>
          <th class="duet-text-center">Perus&shy;kasko</th>
          <th class="duet-text-center">Osa&shy;kasko</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <duet-collapsible heading="Eläintörmäys" margin="none">
              Eläintörmäysvakuutus korvaa, jos ajoneuvo törmää muuhun eläimeen kun hirvieläimeen. Väistämisestä
              aiheutuneet vahingot korvataan kolarointi&shy;vakuutuksesta.
            </duet-collapsible>
          </td>
          <td class="duet-text-center">
            <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
            <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
          </td>
          <td class="duet-text-center">
            <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
            <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
          </td>
          <td class="duet-text-center">
            <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
            <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
          </td>
          <td class="duet-text-center">
            <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
            <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
          </td>
        </tr>
      </tbody>
    </table>
  </duet-table>
</duet-collapsible>

<script>
  // Select the above component
  var collapsible = document.querySelector("duet-collapsible")

  // Listen for toggle events
  collapsible.addEventListener("duetToggle", function (e) {
    console.log("open", e.target.open)
  })
</script>

Properties #

Property	Attribute	Description	Type	Default
`accessibleLabel`	`accessible-label`	Adds accessible label for the collapsible that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.	`string`	`undefined`
`centerHeading`	`center-heading`	Centers heading inside its container	`boolean`	`false`
`heading`	`heading`	The content for the collapsible heading.	`string`	`""`
`headingFullWidth`	`heading-full-width`	Makes collapsible heading full width	`boolean`	`false`
`headingLevel`	`heading-level`	The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. only variations of h1-h6 area accepted	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`undefined`
`headingSize`	`heading-size`	Custom headingSize to be used for font size of heading, as a design token entered in kebab-case x-small -> font-size-x-small. Example: # 12px (0.75rem) ------ +2px (x-small) # 14px (0.875rem) ------ +2px (small) # 16px (1rem) ------ +2px (medium) # 20px (1.25rem) ------ +4px (large) # 24px (1.5rem) ------ +4px (x-large) # 36px (2.25rem) ------ +12px (xx-large) # 48px (3rem) ------ +12px (xxx-large) # 72px (4.5rem) ------ +24px (xxxx-large)	`"large" \| "medium" \| "small" \| "x-large" \| "x-small" \| "xx-large" \| "xxx-large" \| "xxxx-large"`	`undefined`
`headingWeight`	`heading-weight`	The font weight of the heading	`"normal" \| "semibold"`	`"semibold"`
`margin`	`margin`	Controls the margin of the component.	`"auto" \| "none"`	`"auto"`
`open`	`open`	Is the component expanded or collapsed.	`boolean`	`false`
`theme`	`theme`	Theme of the collapsible.	`"" \| "default" \| "turva"`	`""`

Events #

Event	Description	Type
`duetToggle`	Event emitted when opened/closed	`CustomEvent<{ component: "duet-collapsible"; originalEvent: KeyboardEvent \| MouseEvent; }>`

Methods #

`setFocus(options?: FocusOptions) => Promise<void>` #

Sets focus on the specified duet-collapsible. Use this method instead of the global
collapsible.focus().

Parameters #

Name	Type	Description
`options`	`FocusOptions`

Returns #

Type: Promise<void>

Slots #

Slot	Description
`"after-heading"`	Content after the heading can be for example badges.

Shadow Parts #

Part	Description
`"duet-collapsible-after-heading"`	piercing selector for styling the after heading
`"duet-collapsible-content"`	piercing selector for styling the content
`"duet-collapsible-heading-content"`	piercing selector for styling the heading content

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

To hide information with lower priority.
To put long sentences of information under a section that user can expand or collapse.
In comparison tables to reveal additional information about insurance coverage.

When not to use #

For mandatory information or actions.
For hiding form elements.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

heading property is required for accessibility and works as the label for the collapsible content.
Collapsible toggle has a role="button" defined. This makes sure it’s correctly announced by assistive technologies.
Collapsible toggle uses tabindex="0" to make it possible to access it using tab key or programmatically move focus to it.
The toggle also uses aria-expanded and aria-controls attributes to convey the expand and collapse functionality to assistive technologies.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.

Collapsible Ready

Examples #

Properties #

Events #

Methods #

`setFocus(options?: FocusOptions) => Promise<void>` #

Parameters #

Returns #

Slots #

Shadow Parts #

Usage #

When to use #

When not to use #

Accessibility #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

Examples #

Properties #

Events #

Methods #

setFocus(options?: FocusOptions) => Promise<void> #

Parameters #

Returns #

Slots #

Shadow Parts #

Usage #

When to use #

When not to use #

Accessibility #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

`setFocus(options?: FocusOptions) => Promise<void>` #