---
schema_version: "1"
id: 2c0eca9425cf4315fd8e8e8fd9ada5096836f395958a575b5c7277d24fd67c01
title: Collapse
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/aura/components/ui/collapse/ui-collapse.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/ui-collapse.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c3a0087281fef75608de99165cb8b94b41f589c8dbad6887283080265e3450ad
products:
  - Lightning Component Reference
---
# Collapse

**`ui:collapse`**

Indicates that the `ui:menuList` component is collapsed.

::::::tabset{tabs='["Develop", "Specifications"]'}

:::::tab

This event is fired when you collapse the [`ui:menuList` component](/docs/platform/lightning-component-reference/guide/ui-menu-list.html). To set a handler for the `ui:collapse` event, use the `menuCollapse` attribute on `ui:menuList`.

The following example adds or remove a CSS class to the `ui:menuList` component when it's collapsed or expanded.

```xml
<aura:component>
  <ui:menu>
    <ui:menuTriggerLink aura:id="trigger" label="Contacts" />
    <ui:menuList
      class="actionMenu"
      aura:id="actionMenu"
      menuCollapse="{!c.addMyClass}"
      menuExpand="{!c.removeMyClass}"
    >
      <ui:actionMenuItem aura:id="item1" label="All Contacts" click="{!c.doSomething}" />
      <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}" />
    </ui:menuList>
  </ui:menu>
</aura:component>
```

Here's the client-side controller that handles the adding and removing of the CSS classes.

```javascript
({
  addMyClass: function (component, event, helper) {
    var trigger = component.find("trigger");
    $A.util.addClass(trigger, "myClass");
  },
  removeMyClass: function (component, event, helper) {
    var trigger = component.find("trigger");
    $A.util.removeClass(trigger, "myClass");
  },
});
```

If you're using this event with a component other than `ui:menuList`, register the event first.

```xml
<aura:registerEvent
  name="menuCollapse"
  type="ui:collapse"
  description="The event fired when the menu list collapses."
/>
```


:::::

:::::tab

![No specifications to show](https://developer.salesforce.com/media/no-specs.png)


:::::

::::::