DisclosureGroup#

The DisclosureGroup component allows you to organize related content into collapsible sections. This is useful for grouping items in a list, especially when dealing with hierarchical or optional content.

This example demonstrates how to create a top-level disclosure group that can be toggled open or closed, and how to nest additional DisclosureGroup components for sub-sections.

Overview#

You will learn how to:

• Use DisclosureGroup to create expandable sections
• Bind the expanded state to local component state
• Nest disclosure groups to represent hierarchical content
• Combine with other controls such as Toggle, Text, and Button

Example Code#

1. Import Dependencies#

1import { Button, DisclosureGroup, List, Navigation, NavigationStack, Script, Text, Toggle, useState } from "scripting"

2. Define Component State#

Manage the expanded state and toggle values using useState:

1const [topExpanded, setTopExpanded] = useState(true)
2const [oneIsOn, setOneIsOn] = useState(false)
3const [twoIsOn, setTwoIsOn] = useState(true)

3. Layout UI with Disclosure Groups#

The main layout includes a List within a NavigationStack. A Button is provided to toggle the top-level group manually. The DisclosureGroup itself contains multiple child views and a nested DisclosureGroup:

1return <NavigationStack>
2  <List
3    navigationTitle={"DislcosureGroup"}
4    navigationBarTitleDisplayMode={"inline"}
5  >
6    <Button
7      title={"Toggle expanded"}
8      action={() => setTopExpanded(!topExpanded)}
9    />
10    <DisclosureGroup
11      title={"Items"}
12      isExpanded={topExpanded}
13      onChanged={setTopExpanded}
14    >
15      <Toggle
16        title={"Toggle 1"}
17        value={oneIsOn}
18        onChanged={setOneIsOn}
19      />
20      <Toggle
21        title={"Toggle 2"}
22        value={twoIsOn}
23        onChanged={setTwoIsOn}
24      />
25      <DisclosureGroup
26        title={"Sub-items"}
27      >
28        <Text>Sub-item 1</Text>
29      </DisclosureGroup>
30    </DisclosureGroup>
31  </List>
32</NavigationStack>

4. Present the View and Exit#

1async function run() {
2  await Navigation.present({
3    element: <Example />
4  })
5
6  Script.exit()
7}
8
9run()

Key Concepts#

• DisclosureGroup: An expandable view that reveals or hides its content.
• isExpanded: Binds the expanded/collapsed state to a Boolean value.
• onChanged: Callback that triggers when the user expands or collapses the group.
• Nested Groups: You can include one DisclosureGroup inside another to create a hierarchy.
• Integration: Works seamlessly with controls such as Toggle, Text, Button, etc.

Use Cases#

• Grouping settings into categories
• Creating collapsible FAQs or toolboxes
• Displaying nested data like folders, sections, or filters

This pattern provides a clean and user-friendly way to organize complex or optional content within a scrollable list.