How to hide and reveal content using DisclosureGroup

About 2 min

How to hide and reveal content using DisclosureGroup 관련

SwiftUI by Example

Back to Home

How to hide and reveal content using DisclosureGroup | SwiftUI by Example

How to hide and reveal content using DisclosureGroup

Updated for Xcode 15

SwiftUI has a dedicated DisclosureGroup view that presents a disclosure indicator and contains content inside. In its simplest form it can be controlled entirely by the user, but you can also bind it to a Boolean property to determine programmatically whether its content is currently visible or not.

For example, this creates a DisclosureGroup with lots of text inside:

DisclosureGroup("Show Terms") {
    Text("Long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here.")
}
.frame(width: 300)

Download this as an Xcode project

If you wanted to track whether the disclosure group was opened or not, bind it to a Boolean like this:

struct ContentView: View {
    @State private var revealDetails = false

    var body: some View {
        DisclosureGroup("Show Terms", isExpanded: $revealDetails) {
            Text("Long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here.")
        }
        .frame(width: 300)
    }
}