avatar
Published on

Using DisclosureGroup to hide and show content

Authors
  • avatar
    Name
    Mick MacCallum
    Twitter
    @0x7fs

The DisclosureGroup view provides a convenient way to show/hide collapsable content in your app. Simply provide a title and a view that you want to hide to its content closure.

DisclosureGroup("Technical specifications") {
    VStack(alignment: .leading) {
        Text("Weight: 250g")
        Text("Dimensions: 10 x 5 x 2 cm")
        Text("Material: Aluminum")
    }
    .frame(
        maxWidth: .infinity,
        alignment: .leading
    )
}
DisclosureGroup expanding and collapsing animation

If you need to keep track of when the disclosure group is expanded, you can utilize its optional isExpanded: Binding<Bool> binding.

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

    var body: some View {
        DisclosureGroup("Technical specifications", isExpanded: $isExpanded) {
            // ...
        }
    }
}