Collapse

Collapse is used to keep pages focused on the overview of what the user can do.

Collapse is used to keep pages focused on the overview of what the user can do. Details and additional actions are hidden in the fold, and can be opened if the user wants to interact with those elements.

Examples

<script>
export default {
  data() {
    return { visible: false };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    },
  },
};
</script>

<template>
  <div>
    <h1>Here's a headline</h1>
    <gl-button class="gl-float-right" category="primary" @click="toggle" :aria-expanded="visible ? 'true' : 'false'"
      aria-controls="collapse-4">
      Toggle Collapse
    </gl-button>
    <gl-collapse :visible="visible" class="gl-mt-2" id="collapse-4">
      <span>
        This content can be hidden by default, which is good if there are some extensive details
        that should only be visible if the user wants to interact with them
      </span>
    </gl-collapse>
  </div>
</template>

Code reference

v-model support

The component's collapsed (visible) state can be set with v-model which binds internally to the visible prop.

Note that when using v-model to control <gl-collapse>, the aria-* attributes are not automatically placed on the trigger button. Specifically, you should add aria-expanded to reflect the state of the target <gl-collapse> component, and aria-controls should be set to the ID(s) of the target <gl-collapse> component(s).

<script>
export default {
  data() {
    return {
      visible: true
    }
  }
}
</script>

<template>
  <div>
    <gl-button
      :class="visible ? null : 'collapsed'"
      :aria-expanded="visible ? 'true' : 'false'"
      aria-controls="collapse-4"
      @click="visible = !visible"
    >
      Toggle Collapse
    </gl-button>
    <gl-collapse id="collapse-4" v-model="visible">
      <span>Surprise! But I am just a span</span>
    </gl-collapse>
  </div>
</template>

Troubleshooting

When collapsing the container, padding on the collapse component causes complications with the height calculations. The result is a bit of jumpiness at the end of the collapse animation.

The quick solution is to bring the padding into an inner container, which simplifies the height calculations and removes the jumpiness.

<!-- bad -->
<gl-collapse class="gl-p-3">
    <!-- content -->
</gl-collapse>

<!-- good -->
 <gl-collapse>
    <div class="gl-p-3">
        <!-- content -->
    </div>
</gl-collapse>

GlCollapse

import { GlCollapse } from '@gitlab/ui';

Props

Name
Description
Default

v-model

boolean Controls the visibility state of the collapse.

false

tag

string HTML tag to use for the collapse container element.

'div'

Slots

Name
Description
default

The content to show/hide.

Events

Name
Description
input

undefined

shown

hidden

Last updated at: