Best Way to Implement Collapsible Sections on watchOS 10+?

Question

cleverbit_one OP

Created 1w

Replies 2

Boosts 0

Participants 2

Hi all,

I’m trying to implement a collapsible section in a List on watchOS (watchOS 10+). The goal is to have a disclosure chevron that toggles a section open/closed with animation, similar to DisclosureGroup on iOS.

Unfortunately, DisclosureGroup is not available on watchOS. 😢

On iOS, this works as expected using this Section init:

Section("My Header", isExpanded: $isExpanded) {
    // content
}

That gives me a tappable header with a disclosure indicator and the animation built in, as expected.

But on watchOS, this same init displays the header, but it’s not tappable, and no disclosure triangle appears.

I’ve found that to get it working on watchOS, I need to use the other initializer:

Section(isExpanded: $isExpanded) {
    // content
} header: {
    Button(action: { isExpanded.toggle() }) {
        HStack {
            Title("My Header")
            Spacer()
            Image(systemName: isExpanded ? "chevron.down" : "chevron.right")
    }
}

That works, but feels like a workaround. Is this the intended approach for watchOS, or am I missing a more native way to do this?

Any best practices or alternative recommendations appreciated.

Thanks!

Boost

Answer 1

DTS Engineer OP

Apple

1w

But on watchOS, this same init displays the header, but it’s not tappable, and no disclosure triangle appears.

Sections have different behaviors across various context and not all contexts provide a default control to trigger collapse or expansion.

For example using Section(_:isExpanded:content:) on watchOS , you can toggle the expansion using the isExpanded state.

You can also file an enhancement request if you'll like more customizations to collapsible section.

0

Answer 2

cleverbit_one OP

1w

Thanks for the clarification.

Just to confirm my understanding: on watchOS, when using Section(_:isExpanded:content:), there’s no built-in tap gesture or disclosure indicator in the header. So while the section responds to changes in isExpanded, it’s up to the developer to provide a custom control (e.g. a Button in the header) to actually toggle that state. Is that correct?

If so, I’ll go ahead and file an enhancement request. It would be helpful if watchOS offered consistent behavior with iOS here, especially for common use cases like collapsible settings or lists and the fact that DisclosureGroup is not available on watchOS.

Thanks again for the quick reply.

0