#Accordion

An Accordion is a stack of sections where one section is open at a time. Each section is a Unity Foldout: its text is the header, and its children are the content.

How to make an accordion for a list of questions:

<tb:Accordion name="faq">
    <ui:Foldout text="How do I save a game?">
        <ui:Label text="The game saves at each checkpoint." />
    </ui:Foldout>
    <ui:Foldout text="How do I change the keys?">
        <ui:Label text="Open Settings, then Controls." />
    </ui:Foldout>
    <ui:Foldout text="How do I play with a friend?">
        <ui:Label text="Open the Friends window and send an invite." />
    </ui:Foldout>
</tb:Accordion>

var faq = root.Q<Accordion>("faq");
faq.Opened += section => Debug.Log($"Opened: {section.text}");
faq.Q<Foldout>().value = true;

• Each child Foldout is a section. To open or close a section from code, set its value.
• A Foldout is open by default. When the accordion attaches to a panel, it keeps the first open section and closes the other sections. Set value="false" on each Foldout to start with all sections closed.
• A click on a header opens its section. Enter, Space and the submit button of a gamepad do the same for the header with the focus.
• Tab and the up and down keys of the keyboard or a gamepad move between the headers. Left closes the section of the focused header and right opens it.
• The header with the focus shows the focus border of the workspace.
• A Foldout or a Toggle in the content of a section is not a section. It does not close the other sections.
• A section opens and closes with a short height animation (180 ms, ease-out). At the end the content has its automatic height again, so a later change of the content resizes the section. Set animate="false" to open and close at once. With AnimationsEnabled off on the workspace, there is no animation.

Tips:

• Use multiple="true" for a settings page, where the user compares sections.
• Use the default mode for a list of questions, where one answer shows at a time.
• With collapsible="true", set value="false" on each Foldout for a list that starts closed.
• Keep the header text short. A long header does not wrap.

#Styling

.tb-accordion > .unity-foldout > .unity-foldout__toggle { background-color: var(--tb-color-surface-alt); }