Collapsible ​

The collapsible component is used to put long sections of information under a block that users can expand or collapse.

Usage ​

<script lang="ts" setup>
import { ref } from 'vue'; 
import { Button, Collapsible } from '@returnless/focus-ui';

const open = ref(false);
</script>

<template>
  <Button @click="open = !open" :aria-expanded="open" aria-controls="basic-collapsible">Toggle</Button>
  <Collapsible :open="open" id="basic-collapsible">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis culpa deserunt distinctio dolor doloremque et
      eum eveniet, fugit harum nisi officiis perferendis quae quaerat quidem ratione tempore ut veritatis voluptatibus.
    </p>
  </Collapsible>
</template>

Best practices ​

The collapsible component should:

• Be used for information that is lower priority or that users don't need to see all the time.
• Not be used to hide error messages or other critical information that requires an immediate action.

Content guidelines ​

Collapsible containers are cards with expanded and collapsible functionality, and should follow the content guidelines for cards.

Accessibility ​

Use the collapsible component in conjunction with a button. Place the collapsible content immediately after the button that controls it, so users with vision or attention issues can easily discover what content is being affected.

• Use the required id prop of the collapsible component to give the content a unique id value.
• Use the ariaExpanded prop on the button component to add an aria-expanded attribute, which conveys the expanded or collapsed state to screen reader users.
• Use the ariaControls prop on the button component, and set its value to the id value of the collapsible component.