Foldout

A Foldout is a collapsible section of a UI. The Foldout hides or reveals the elements it contains when you click its header.

Create a Foldout

A Foldout has the following elements:

• Label: A label you can use as the name of the Foldout.
• Toggle: Click the toggle to expand or collapse the container sub-element. It is styled to look like an arrow rather than the default checkbox. When the container is collapsed, the arrow points right. When the container is expanded, the arrow points down.
• Container: A container contains the visual elementsA node of a visual tree that instantiates or derives from the C# VisualElement class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
  See in Glossary that you want to show or hide when you toggle the Foldout.

You can add elements to a Foldout’s container, and the show-or-hide function works automatically.

The following UI Document creates a Foldout with two buttons in its container. The two buttons show or hide when you toggle the Foldout.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:Foldout text="Foldout" name="MyFoldout" value="true">
        <ui:Button text="First item" />
        <ui:Button text="Second item" />
    </ui:Foldout>
</ui:UXML>

Respond to user actions

A Foldout and its Toggle sub-element respond to Change events. The Toggle hides or shows the Foldout container.

You can bind a Foldout to a Boolean variable or access its value through the INotifyValueChanged<bool> interface.

Examples

The following C# code snippet creates a Foldout and checks whether the foldout is expanded:

// Create a new foldout, add two elements to it and add it to the container
var cSharpFoldout = new Foldout {text = "Elements"};
cSharpFoldout.Add(new Label("Indented Label"));
cSharpFoldout.Add(new Slider("Indented Slider", 0, 100));
container.Add(cSharpFoldout);

cSharpFoldout.RegisterValueChangedCallback(e =>
{
    // Check whether the foldout is expanded
    if (cSharpFoldout.value)
    {
        Debug.Log("Foldout is expanded");
    }
    else
    {
        Debug.Log("Foldout is collapsed");
    }
});

C# base class and namespace

C# class: Foldout
Namespace: UnityEngine.UIElements
Base class: BindableElement

Member UXML attributes

This element has the following member attributes:

Inherited UXML attributes

This element inherits the following attributes from its base class:

This element also inherits the following attributes from VisualElement:

USS classes

The following table lists all the C# public property names and their related USS selector.

You can also use the Matching Selectors section in the Inspector or the UI Toolkit Debugger to see which USS selectors affect the components of the VisualElement at every level of its hierarchy.

Additional resource

• Change events
• ToggleA checkbox that allows the user to switch an option on or off. More info
  See in Glossary